Sidebar
NavigationStable
Full-featured app sidebar with collapsible behavior, icon mode, keyboard shortcut (⌘B), mobile drawer, and cookie-persisted state.
Quick Import
import { Sidebar } from "@cohere-ai/waypoint-ui/sidebar";Live Preview
Loading Sidebar...
Props
| Name | Type | Default | Description |
|---|---|---|---|
defaultOpen (SidebarProvider) | boolean | true | Default open state |
open (SidebarProvider) | boolean | - | Controlled open state |
onOpenChange (SidebarProvider) | function | - | Callback on state change |
forceDesktop (SidebarProvider) | boolean | false | Skip mobile drawer mode |
side (Sidebar) | 'left' | 'right' | 'left' | Which side the sidebar appears on |
variant (Sidebar) | 'sidebar' | 'floating' | 'inset' | 'sidebar' | Visual style |
collapsible (Sidebar) | 'offcanvas' | 'icon' | 'none' | 'offcanvas' | Collapse behavior |
isActive (SidebarMenuButton) | boolean | false | Active/selected state |
tooltip (SidebarMenuButton) | string | TooltipContent props | - | Tooltip shown in collapsed icon mode |
Examples
Basic Sidebar Layout
App shell with sidebar and main content area
1 import { 2 SidebarProvider, Sidebar, SidebarContent, SidebarMenu, 3 SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger, 4 } from '@cohere-ai/waypoint-ui/sidebar'; 5 6 <SidebarProvider> 7 <Sidebar> 8 <SidebarContent> 9 <SidebarMenu> 10 <SidebarMenuItem> 11 <SidebarMenuButton isActive> 12 <HomeIcon /> Dashboard 13 </SidebarMenuButton> 14 </SidebarMenuItem> 15 <SidebarMenuItem> 16 <SidebarMenuButton> 17 <SettingsIcon /> Settings 18 </SidebarMenuButton> 19 </SidebarMenuItem> 20 </SidebarMenu> 21 </SidebarContent> 22 </Sidebar> 23 <SidebarInset> 24 <header> 25 <SidebarTrigger /> 26 </header> 27 Main content 28 </SidebarInset> 29 </SidebarProvider>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Sidebar component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.