Sidebar
A composable sidebar component with mobile Sheet integration and desktop fixed positioning.
Recommended Pattern
Use building blocks to create a responsive sidebar that shows as a Sheet on mobile and fixed sidebar on desktop.
Mobile + Desktop Sidebar
This is the recommended pattern that combines mobile Sheet with desktop fixed sidebar.
Mobile: Uses Sheet component with slide-in animation from left.
Desktop: Fixed sidebar with consistent content structure.
Coordination: All components share the same signal ID for state management.
Building Blocks
Components that make up the sidebar system.
Core Components
- •
SidebarMobile- Sheet wrapper - •
SidebarDesktop- Fixed sidebar - •
SidebarTrigger- Mobile hamburger - •
SidebarContent- Shared container
Content Components
- •
SidebarHeader- Top section - •
SidebarNav- Navigation menu - •
SidebarNavLink- Individual links - •
SidebarFooter- Bottom section
Key Features
Core capabilities of the sidebar component system.
Signal Coordination
- • All components share the same signal ID
- • Trigger knows if sidebar is open
- • Nav links close mobile sidebar
- • Consistent state across all building blocks
Responsive Design
- • Mobile: Sheet with slide animations
- • Desktop: Fixed sidebar (w-64)
- • Device-aware rendering
- • Shared content structure