Patterns
Sidebar
The source's 275px navy rail, profile block, and collapsible navigation.
Selected navigation
home
Open a group to explore nested links. This navigation updates only the local example.
Interactive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| brand | ReactNode | required |
| items | NavigationItem[] | required |
| activeId | string | — |
| user | { name, subtitle?, avatar? } | — |
| onNavigate | (item) => void | — |
| userActions | { label, onSelect }[] | — |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- Supply your own brand and profile data. Navigation has no production coupling.
- Use AppShell to add the mobile navigation drawer.
Reference
Member and settings navigation