Sidebar
A composable, themeable sidebar component for building application navigation layouts, with support for collapsible states, multiple visual variants, grouped menu items, and responsive mobile behaviour via a Sheet overlay.
Basic Structure
The foundational
Sidebar layout using SidebarHeader, SidebarContent, and SidebarFooter sections. Each section is a composable slot that accepts any content, while SidebarMenu, SidebarMenuItem, and SidebarMenuButton provide structured navigation items with active state styling via the IsActive parameter.With Groups
Organize navigation items into logical sections using
SidebarGroup with a SidebarGroupLabel heading. Groups create visual separation between categories like "Platform" and "Settings", making complex navigation hierarchies easier to scan and understand.Icons Only
A collapsed sidebar showing only icons, achieved by setting
Collapsible to SidebarCollapsible.Icon on the Sidebar component. Wrap each SidebarMenuButton in a Tooltip to provide labels on hover, ensuring users can still identify each navigation item when text labels are hidden.Inset Variant
The
SidebarVariant.Inset variant places the sidebar flush against the window edge while the main content area appears visually inset with rounded corners and a subtle shadow. This creates a modern layout where the sidebar background extends to the edges and the content floats within it, commonly used in dashboard applications.Floating Variant
The
SidebarVariant.Floating variant renders the sidebar as a detached panel with rounded corners, a border, and shadow. This creates a card-like floating navigation panel that sits within a padded layout, giving the interface a spacious and modern appearance suited for creative tools and design applications.Header with Workspace Switcher
A realistic sidebar header combining
SidebarHeader with a DropdownMenu for workspace or team switching. The trigger displays the current workspace with a chevron icon, and the dropdown presents available workspaces with visual indicators and a "Create Workspace" action at the bottom.Footer with User Menu
A sidebar footer with a
DropdownMenu for user profile actions and sign out. The trigger displays the user's avatar, name, and email, while the dropdown menu provides account management options and a destructive "Log out" action separated by dividers for clear visual grouping.Full Application Layout
A complete sidebar layout combining a workspace switcher in the
SidebarHeader, grouped navigation with SidebarGroup sections in SidebarContent, and a user menu in the SidebarFooter. This pattern demonstrates how all sidebar sub-components compose together for a production-ready application shell.Floating Pill Navigation
Set
CollapsedMode="SidebarCollapsedMode.Pill" on the provider. BbSidebarPillNav replaces the collapsed sidebar, and BbSidebarPillInset reserves space above the page content. Fixed="false" keeps this demo inside its positioned container.Animated Selection Indicator
Place
BbSidebarSelectionIndicator before the menu in a positioned wrapper. It follows the active button; FollowHover also previews pointer hover and keyboard focus.Structure
The Sidebar component is composed of several parts that work together:
Loading example…
CSS Custom Property Theming
Sidebar layout is driven by 61 CSS custom properties across 12 sub-components.
Set these variables on :root to theme padding, gap, font-size, line-height, border-radius, height,
icon-size, active state styling, and badge appearance — no !important or specificity battles needed.
All variables have fallback values matching the default styling, so existing usage is unaffected.
Components expose data-sidebar attributes for CSS targeting:
data-sidebar="menu-button", "trigger", "rail",
"group", "group-label", "menu-action",
"menu-sub", etc. Size variants use data-size="default",
"sm", "lg" on BbSidebarMenuButton and
BbSidebarMenuSubButton. Active state uses data-active="true" / "false".
Sidebar Layout & Sizing
| Variable | Default | Description |
|---|---|---|
--sidebar-width | 16rem | Main sidebar width |
--sidebar-width-mobile | 18rem | Mobile sidebar width |
--sidebar-width-icon | 3rem | Collapsed icon-only width |
Menu Button (BbSidebarMenuButton)
| Variable | Default | Description |
|---|---|---|
--sidebar-menu-button-height | auto | Item height |
--sidebar-menu-button-px | 0.5rem | Horizontal padding |
--sidebar-menu-button-py | 0.375rem | Vertical padding |
--sidebar-menu-button-font-size | 0.875rem | Default text size (14px) |
--sidebar-menu-button-line-height | 1.25rem | Default line height (20px) |
--sidebar-menu-button-font-size-sm | 0.75rem | Small variant text size (12px) |
--sidebar-menu-button-line-height-sm | 1rem | Small variant line height (16px) |
--sidebar-menu-button-font-size-lg | 1rem | Large variant text size (16px) |
--sidebar-menu-button-line-height-lg | 1.5rem | Large variant line height (24px) |
--sidebar-menu-button-font-weight | 400 | Inactive text weight |
--sidebar-menu-button-active-font-weight | 500 | Active text weight |
--sidebar-menu-button-active-bg | var(--sidebar-accent) | Active background color |
--sidebar-menu-button-active-color | var(--sidebar-accent-foreground) | Active text color |
--sidebar-menu-button-active-shadow | none | Active state shadow |
--sidebar-menu-button-radius | 0.375rem | Border radius (6px) |
--sidebar-menu-button-gap | 0.5rem | Gap between icon and text (8px) |
--sidebar-menu-button-icon-size | 1rem | Icon width/height (16px) |
--sidebar-menu-button-collapsed-size | 2rem | Icon-only mode size (32px) |
--sidebar-menu-button-collapsed-padding | 0.5rem | Icon-only mode padding (8px) |
--sidebar-menu-button-collapsed-padding-lg | 0.75rem | Large size icon-only padding (12px) |
Group (BbSidebarGroup)
| Variable | Default | Description |
|---|---|---|
--sidebar-group-py | 0.5rem | Vertical padding |
--sidebar-group-px | 0.5rem | Horizontal padding |
Group Label (BbSidebarGroupLabel)
| Variable | Default | Description |
|---|---|---|
--sidebar-group-label-height | 2rem | Label row height (32px) |
--sidebar-group-label-px | 0.5rem | Horizontal padding (8px) |
--sidebar-group-label-font-size | 0.75rem | Text size (12px) |
--sidebar-group-label-line-height | 1rem | Line height (16px) |
--sidebar-group-label-font-weight | 500 | Text weight |
--sidebar-group-label-radius | 0.375rem | Border radius (6px) |
--sidebar-group-label-icon-size | 1rem | Icon width/height (16px) |
Menu (BbSidebarMenu)
| Variable | Default | Description |
|---|---|---|
--sidebar-menu-gap | 0.25rem | Gap between menu items (4px) |
Header (BbSidebarHeader)
| Variable | Default | Description |
|---|---|---|
--sidebar-header-py | 0.5rem | Vertical padding (8px) |
--sidebar-header-px | 0.5rem | Horizontal padding (8px) |
--sidebar-header-gap | 0.5rem | Gap between child elements (8px) |
Header Content (BbSidebarHeaderContent)
| Variable | Default | Description |
|---|---|---|
--sidebar-header-content-gap | 0.5rem | Gap between logo and text (8px) |
--sidebar-header-content-py | 0.5rem | Vertical padding (8px) |
--sidebar-header-content-px | 0.5rem | Horizontal padding (8px) |
Footer (BbSidebarFooter)
| Variable | Default | Description |
|---|---|---|
--sidebar-footer-py | 0.5rem | Vertical padding (8px) |
--sidebar-footer-px | 0.5rem | Horizontal padding (8px) |
--sidebar-footer-gap | 0.5rem | Gap between child elements (8px) |
Content (BbSidebarContent)
| Variable | Default | Description |
|---|---|---|
--sidebar-content-py | 0.5rem | Vertical padding (8px) |
--sidebar-content-px | 0.5rem | Horizontal padding (8px) |
--sidebar-content-gap | 0.5rem | Gap between groups (8px) |
Badge (BbSidebarMenuBadge)
| Variable | Default | Description |
|---|---|---|
--sidebar-badge-height | 1.25rem | Badge height (20px) |
--sidebar-badge-min-width | 1.25rem | Minimum badge width (20px) |
--sidebar-badge-px | 0.25rem | Horizontal padding (4px) |
--sidebar-badge-font-size | 0.75rem | Text size (12px) |
--sidebar-badge-line-height | 1rem | Line height (16px) |
--sidebar-badge-font-weight | 500 | Text weight |
--sidebar-badge-radius | 0.375rem | Border radius (6px) |
--sidebar-badge-right | 0.25rem | Right offset from button edge (4px) |
--sidebar-badge-bg | transparent | Badge background |
--sidebar-badge-color | var(--sidebar-foreground) | Badge text color |
Sub Menu (BbSidebarMenuSub)
| Variable | Default | Description |
|---|---|---|
--sidebar-sub-mx | 0.875rem | Horizontal margin/inset (14px) |
--sidebar-sub-px | 0.625rem | Horizontal padding (10px) |
--sidebar-sub-py | 0.125rem | Vertical padding (2px) |
--sidebar-sub-gap | 0.25rem | Gap between sub-menu items (4px) |
Sub Menu Button (BbSidebarMenuSubButton)
| Variable | Default | Description |
|---|---|---|
--sidebar-sub-button-height | 1.75rem | Item height (28px) |
--sidebar-sub-button-px | 0.5rem | Horizontal padding (8px) |
--sidebar-sub-button-gap | 0.5rem | Gap between icon and text (8px) |
--sidebar-sub-button-radius | 0.375rem | Border radius (6px) |
--sidebar-sub-button-font-size | 0.875rem | Default text size (14px) |
--sidebar-sub-button-line-height | 1.25rem | Default line height (20px) |
--sidebar-sub-button-font-size-sm | 0.75rem | Small variant text size (12px) |
--sidebar-sub-button-line-height-sm | 1rem | Small variant line height (16px) |
--sidebar-sub-button-icon-size | 1rem | Icon width/height (16px) |
Example Override
:root {
/* Custom active state styling */
--sidebar-menu-button-active-bg: var(--primary);
--sidebar-menu-button-active-color: var(--primary-foreground);
--sidebar-menu-button-active-font-weight: 600;
/* Remove border radius for a flat look */
--sidebar-menu-button-radius: 0;
--sidebar-sub-button-radius: 0;
/* Compact spacing */
--sidebar-menu-button-py: 0.25rem;
--sidebar-group-py: 0.25rem;
--sidebar-menu-gap: 0.125rem;
/* Branded badge */
--sidebar-badge-bg: var(--primary);
--sidebar-badge-color: var(--primary-foreground);
}