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.

Structure

The Sidebar component is composed of several parts that work together:

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

Menu Button (BbSidebarMenuButton)

Group (BbSidebarGroup)

Group Label (BbSidebarGroupLabel)

Menu (BbSidebarMenu)

Header (BbSidebarHeader)

Header Content (BbSidebarHeaderContent)

Footer (BbSidebarFooter)

Content (BbSidebarContent)

Badge (BbSidebarMenuBadge)

Sub Menu (BbSidebarMenuSub)

Sub Menu Button (BbSidebarMenuSubButton)

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);
}