Skip to main content

​
Overview

Sidebar provides a comprehensive sidebar navigation system with collapsible behavior, mobile responsive design, and rich composition patterns.
  • Use it for application navigation and hierarchical content organization.
  • Supports left and right placement.
  • Includes sidebar, floating, and inset visual variants.
  • Features automatic mobile drawer conversion.
  • Built-in keyboard shortcuts (Cmd/Ctrl+B to toggle).
Must be used within SidebarProvider for state management.

​
Installation

npm i @kuzenbo/core

​
Import

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
} from "@kuzenbo/core/ui/sidebar";

​
Basic Example

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@kuzenbo/core/ui/sidebar";

export function BasicSidebar() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton>
                    Dashboard
                  </SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton>
                    Projects
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  );
}

​
Advanced Example

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarTrigger,
} from "@kuzenbo/core/ui/sidebar";

export function AdvancedSidebar() {
  return (
    <SidebarProvider defaultOpen>
      <Sidebar variant="floating" collapsible="icon">
        <SidebarHeader>
          <div className="flex items-center gap-2 px-4 py-2">
            <span className="font-semibold">My App</span>
          </div>
        </SidebarHeader>
        
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton isActive tooltip="Dashboard">
                    Dashboard
                  </SidebarMenuButton>
                  <SidebarMenuBadge>5</SidebarMenuBadge>
                </SidebarMenuItem>
                
                <SidebarMenuItem>
                  <SidebarMenuButton>
                    Projects
                  </SidebarMenuButton>
                  <SidebarMenuSub>
                    <SidebarMenuSubItem>
                      <SidebarMenuSubButton>
                        Web App
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                    <SidebarMenuSubItem>
                      <SidebarMenuSubButton>
                        Mobile App
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  </SidebarMenuSub>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        
        <SidebarFooter>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton>
                Settings
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarFooter>
      </Sidebar>
      
      <SidebarTrigger />
    </SidebarProvider>
  );
}

​
Controlled State

import { SidebarProvider, useSidebar } from "@kuzenbo/core/ui/sidebar";
import { useState } from "react";

export function ControlledSidebar() {
  const [open, setOpen] = useState(true);
  
  return (
    <SidebarProvider open={open} onOpenChange={setOpen}>
      {/* Sidebar content */}
    </SidebarProvider>
  );
}

​
API Reference

​
SidebarProvider

Required provider for sidebar state management.
​
defaultOpen
boolean
default:true
Initial open state (uncontrolled).
​
open
boolean
Controlled open state.
​
onOpenChange
(open: boolean) => void
Callback when open state changes.
Main sidebar container.
​
side
'left' | 'right'
default:"left"
Which side the sidebar appears on.
​
variant
'sidebar' | 'floating' | 'inset'
default:"sidebar"
Visual style variant.
​
collapsible
'offExamples' | 'icon' | 'none'
default:"offExamples"
Collapsible behavior: offExamples hides completely, icon shows icon-only state, none disables collapsing.

​
SidebarHeader

Header section at the top of the sidebar.

​
SidebarContent

Main scrollable content area.

​
SidebarFooter

Footer section at the bottom of the sidebar.

​
SidebarGroup

Semantic grouping container for menu sections.

​
SidebarGroupLabel

Label for a sidebar group.

​
SidebarGroupContent

Content wrapper for group items.

​
SidebarGroupAction

Action button positioned in the group header.

​
SidebarMenu

Menu list container.
​
size
InputSize
default:"md"
Size of menu items: xs | sm | md | lg | xl.

​
SidebarMenuItem

Individual menu item container.

​
SidebarMenuButton

Interactive menu button with icon support.
​
isActive
boolean
default:false
Whether this menu item is active.
​
tooltip
string | TooltipContentProps
Tooltip content (shown when sidebar is collapsed).
​
size
InputSize
default:"md"
Size override for this button.
​
variant
'default' | 'outline'
default:"default"
Visual variant.

​
SidebarMenuBadge

Badge indicator for menu items.

​
SidebarMenuAction

Action button within a menu item.

​
SidebarMenuSub

Nested submenu container.

​
SidebarMenuSubItem

Individual item within a submenu.

​
SidebarMenuSubButton

Interactive button within a submenu.

​
SidebarMenuSkeleton

Loading skeleton for menu items.

​
SidebarInput

Input field styled for sidebar use.

​
SidebarSeparator

Visual separator between sections.

​
SidebarTrigger

Button to toggle sidebar visibility.

​
SidebarRail

Clickable rail for expanding collapsed sidebar.

​
SidebarInset

Main content area positioned beside the sidebar.

​
useSidebar

Hook for accessing sidebar state and controls.
​
state
'expanded' | 'collapsed'
Current visual state.
​
open
boolean
Whether sidebar is open.
​
setOpen
(open: boolean) => void
Function to set open state.
​
toggleSidebar
() => void
Function to toggle sidebar.
​
isMobile
boolean
Whether viewport is mobile.
​
openMobile
boolean
Mobile drawer open state.
​
setOpenMobile
(open: boolean) => void
Function to set mobile drawer state.

​
Accessibility

  • Sidebar includes proper semantic landmarks.
  • Keyboard shortcut (Cmd/Ctrl+B) for quick toggling.
  • Focus management when collapsing/expanding.
  • Mobile version uses Sheet drawer with proper ARIA labels.

​
SSR and RSC Notes

  • Sidebar is client-interactive ("use client").
  • Mobile detection uses useIsMobile hook from @kuzenbo/hooks.
  • Cookie-based state persistence for sidebar preference.

​
Styling and Tokens

  • Uses sidebar-specific tokens (bg-sidebar, text-sidebar-foreground, border-sidebar-border).
  • floating variant adds shadow and rounded corners.
  • inset variant adds margin for floating appearance.
  • Icon-only collapsed state shows tooltips on hover.

​
Troubleshooting

  • Sidebar not appearing: ensure component is wrapped in SidebarProvider.
  • Toggle not working: verify SidebarTrigger is rendered and provider is present.
  • Mobile drawer not showing: check that Sheet component is properly imported.
  • Tooltips not appearing when collapsed: ensure tooltip prop is set on SidebarMenuButton.

Build docs developers (and LLMs) love

Get started for freeTalk to us