Sidebar
A collapsible sidebar.
Importing
1
import { SidebarHeading, SidebarItem, SidebarRoot, SidebarToggle, SidebarUser } from '@infinityfx/fluid';Usage
Tree navigation
API reference
SidebarRoot Props
collapsed?
boolean
Whether the sidebar is collapsed.
setCollapsed?
(value: boolean) => void
Callback function triggered when the collapsed state changes.
SidebarToggle Props
toggle?
'square' | 'round' | 'none'
'square'
The visual style of the toggle button.
SidebarItem Props
label?
string
The text label displayed on the item.
icon?
React.ReactNode
An optional icon displayed on the left.
right?
React.ReactNode
Custom element shown on the right side of the label when there are no child items.
size?
'sml' | 'med'
'med'
active?
boolean
false
Marks the item as currently selected.
variant?
'default' | 'inverted'
'default'
round?
boolean
false
compact?
boolean
false
Renders a smaller, compact variant of the item.
defaultOpen?
boolean
false
Whether the nested child items are expanded by default.
SidebarUser Props
name?
string
The name of the user.
status?
string
An optional status message shown below the user name.
indicator?
string | number | boolean
false
Visual status indicator badge content shown over the avatar.
round?
boolean
false
Makes the user avatar round.
icon?
React.ReactNode
Action icon shown on the right (defaults to a "more options" icon).