Sidebar
Full-screen layout primitive. Manages collapse state, keyboard shortcut, and mobile sheet automatically.
@/components/ui/sidebarLive usage
You are looking at it right now. The left navigation panel on this page is a Sidebar instance. The current implementation lives in src/components/app-shell.tsx.
Press ⌘B to toggle it.
Sidebar props
| Prop | Values | Description |
|---|---|---|
| side | "left" | "right" | Which side the sidebar appears on |
| variant | "sidebar" | "floating" | "inset" | Visual style — sidebar pushes content, floating overlays, inset is embedded |
| collapsible | "offcanvas" | "icon" | "none" | How the sidebar collapses — slides off, shrinks to icons, or never collapses |
Architecture — how Thilo uses it
1. Wrap app in SidebarProvider
Provides collapse state context to all children. Place in layout.tsx.
2. Render Sidebar inside AppShell
Contains Header + Content (with SidebarGroups) + Footer.
3. Add SidebarTrigger to top bar
Opens/closes the sidebar. ⌘B also works automatically.
4. Use SidebarMenuButton with isActive
Highlights the current route using usePathname() from next/navigation.
Sub-components
| Component | Role |
|---|---|
| SidebarProvider | Wraps the entire app layout. Manages open/closed state and keyboard shortcut (⌘B) |
| Sidebar | The panel itself. side: "left" | "right". variant: "sidebar" | "floating" | "inset" |
| SidebarTrigger | Toggle button — usually placed in the top bar |
| SidebarHeader | Top slot — logo, workspace switcher |
| SidebarContent | Scrollable middle area — contains SidebarGroups |
| SidebarFooter | Bottom slot — user avatar, sign out |
| SidebarGroup | Named section within the sidebar |
| SidebarGroupLabel | Small uppercase label above a group of nav items |
| SidebarGroupContent | Wrapper for the items inside a group |
| SidebarMenu | Vertical list of nav items |
| SidebarMenuItem | Single row in the nav list |
| SidebarMenuButton | Clickable row — icon + label. isActive highlights the current route |
| SidebarMenuBadge | Right-aligned badge on a menu item (e.g. unread count) |
| SidebarMenuSub | Nested sub-items (collapsible tree) |
| SidebarMenuSubItem | Row inside a sub-menu |
| SidebarMenuSubButton | Clickable row inside a sub-menu |
| SidebarSeparator | Horizontal divider between groups |
| SidebarRail | Thin drag-handle strip on the sidebar edge for resizing |
On mobile the sidebar automatically switches to a Sheet (slide-over). No extra code needed — SidebarProvider handles this via a breakpoint hook.
On this page