Sidebar
The app navigation rail and the nine parts it's assembled from.
It's a composition, not a config
Sidebar takes no items array. You place the parts yourself, in whatever order and grouping your app needs, which is what lets a promo sit mid-rail in one product and above the footer in another without the component growing options for each case.
Collapsing
collapsed isn't inherited — each part takes its own, because each has a different icon-only layout. Pass the same state down to all of them.
Icon rail
Collapsed items fall back to a native title tooltip. If you wrap them in the Tooltip component instead, set nativeTooltip={false} so both don't fire at once — that's exactly what the live CRM dashboard on the home page does.
Sidebar props
| Prop | Type | Default | Description |
|---|---|---|---|
| collapsed | boolean | false | Narrows the rail. Pass the same value to each child that takes it. |
| children | ReactNode | The parts below, in whatever order your app needs. |
SidebarItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Item text. Still required when collapsed, since it becomes the tooltip and accessible name. | |
| icon | IconComponent | The icon component itself, not an element. | |
| active | boolean | false | Marks the current page. |
| activeIndicator | boolean | true | Active styling: true is the raised card with a left accent bar, false is a flat tint. Ignored when collapsed. |
| badge | string | Trailing count or status pill. | |
| hasSubmenu | boolean | false | Shows the disclosure chevron. You render the SidebarSubItems yourself. |
| disabled | boolean | false | Dims the item and drops its click handler. |
| collapsed | boolean | false | Icon-only layout. |
| nativeTooltip | boolean | true | Title-attribute tooltip when collapsed. Set false if you're wrapping the item in your own Tooltip, so the two don't compete on hover. |
| href | string | Renders an anchor instead of a button. | |
| onClick | () => void | Click handler. |
SidebarHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'brand' | 'workspace' | 'brand-toggle' | 'brand' | Brand is a logo and name; workspace adds a subtitle; brand-toggle adds the collapse button. |
| title | string | Product or workspace name. | |
| subtitle | string | Second line, e.g. the plan. | |
| logo | ReactNode | Mark beside the title. | |
| onToggle | () => void | Fires from the collapse button on brand-toggle. | |
| toggleIcon | IconComponent | PanelLeftClose | Icon for that button. |
| collapsed | boolean | false | Icon-only layout. |
The remaining parts
| Prop | Type | Default | Description |
|---|---|---|---|
| SidebarSearch | type, placeholder, value, onChange, onClick, collapsed | 'field' is an inline input; 'command' is a button that opens your own command menu. | |
| SidebarGroupLabel | children | Small caps heading above a group of items. | |
| SidebarSubItem | label, active, disabled, href, onClick | Nested child row, indented under an item with hasSubmenu. | |
| SidebarDivider | — | A rule between groups. | |
| SidebarPromo | type, title, description, ctaLabel, onCta, onDismiss, icon | Upsell or announcement card, usually pinned above the footer. | |
| SidebarFooter | type, title, subtitle, avatarSrc, avatarInitials, onMenu, onSignOut, collapsed | Account row at the bottom, as plain user, user-with-menu, or an actions set. |
Why it works this way
Why
- The container is 248px expanded and 64px collapsed with no fill or border of its own. It composes with the standalone parts rather than owning their content.
Don't
- Don't build navigation from scratch beside it. Compose SidebarItem, SidebarGroupLabel and the rest.