Sidebar
Navigates a console from a left rail that folds between labelled rows and icons.
Configurations
Supported configurations for this component.
Configurations
4 examplesAdd to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
SidebarItem
| Prop | Type | Default | Description |
|---|---|---|---|
| labelreq | string | - | Row label; also the row's React key and its tooltip text when collapsed. |
| iconreq | React.ElementType | - | Phosphor icon for the row. Required — the rail can always be collapsed, and a collapsed row is its glyph. |
| active | boolean | - | Current destination — accent glyph plus the trailing-edge marker. |
| onClick | () => void | - | Navigate handler. |
Sidebar
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsreq | SidebarItem[] | - | The nav rows. The rail renders every row itself, which is what lets it guarantee that nothing mounts or reflows mid-fold. |
| footerItems | SidebarItem[] | [] | Utility rows (Docs, Settings) under their own hairline at the foot of the rail. They are destinations, so they are rows and not IconButtons, and they fold on the same switch as the nav above them. They carry their own marker scope, so an active footer row never pulls the marker out of the nav list. |
| logo | React.ReactNode | - | The mark at the top of the rail. Defaults to `AndromedaIcon` at 28px — behind `spacing[3]` that centres it on the rail's own 26px line at both widths. Size a replacement to the same box; `null` drops the mark. |
| title | React.ReactNode | - | ONE line of type beside the mark, naming the console. A rail that folds cannot afford a brand block whose height changes with the form, so this is a single line and never a two-line lockup. With no `title` and `logo={null}` the brand block and its hairline are not rendered at all. |
| collapsible | boolean | true | Renders the fold caret and lets the rail move between its two widths. False locks the rail at whichever width `defaultCollapsed` names and draws no caret: `collapsible={false}` is the static labelled sidebar, and `collapsible={false} defaultCollapsed` is the static icon rail. |
| defaultCollapsed | boolean | false | Which form the rail opens in. Expanded by default: that is the form the labels live in, and the rail folds down to icons on request. The rail owns this state; a page does not hold it. |
| onCollapsedChange | (collapsed: boolean) => void | - | Fired when the caret folds the rail. Notification only — the rail stays in charge of its own width, and this is here so a page can persist the reader's preference without taking ownership of it. |
| motionProps | import('framer-motion').MotionProps | - | Entrance choreography from a parent's `useCascadeProps` (foundations/motion.md). The root is already a motion element for the fold, so this rides on it. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas