Navigation
Sidebar
Composable application sidebar with collapsible groups, rail, and mobile sheet. Built for app shells.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/sidebar
Examples
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
SidebarProvider, Sidebar, SidebarContent, SidebarGroup,
SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger,
} from "@codefast/ui/sidebar";
<SidebarProvider>
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>…</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<main>
<SidebarTrigger />
…
</main>
</SidebarProvider>
API reference
Props for each part of the component. All native element props are also forwarded.
SidebarProvider
Wraps the shell; owns collapse state and keyboard shortcut.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | true | Whether the sidebar starts expanded. |
| open / onOpenChange | boolean / (open: boolean) => void | — | Control the collapsed state yourself. |
Sidebar parts
| Prop | Type | Default | Description |
|---|---|---|---|
| SidebarMenuButton | ReactNode | — | A nav row; compose inside SidebarMenuItem / SidebarGroup. |
| SidebarTrigger | — | — | Toggles the sidebar; place it in your main content. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves through the menu buttons. |
| Enter | Activates the focused item. |
- Built as a nav landmark; the collapsed rail keeps icons reachable.
- On mobile it becomes a sheet — ensure the trigger is always reachable.
- Give icon-only collapsed items accessible names (tooltips or labels).
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for app shells with persistent navigation.
- Group links with labels and keep the list shallow.
Don’t
- Don’t use a sidebar for a content site with few pages.
- Don’t hide the toggle — users need a way back.