Sidebar

Sidebar component for creating collapsible side navigation panels. Built with Radix UI and Vaul for smooth animations and accessibility.

Install

npx shadcn@latest add /r/sidebar.json

Code Examples

import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger, DocumentContent } from "@fragment_ui/ui";

<Sidebar>
  <SidebarHeader>
    <h2>Header</h2>
  </SidebarHeader>
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Navigation</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton>Home</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>
    <p>Footer</p>
  </SidebarFooter>
</Sidebar>

// Note: Sidebar uses Vaul.Drawer which requires browser APIs.
// For Next.js SSR, wrap Sidebar in dynamic import with ssr: false:
import dynamic from "next/dynamic";
const ClientSidebar = dynamic(() => import("@fragment_ui/ui").then(mod => mod.Sidebar), { ssr: false });

Components

• Sidebar - Root component that wraps all sidebar content
• SidebarTrigger - Button to toggle sidebar visibility
• SidebarHeader - Header section of the sidebar
• SidebarContent - Main content area of the sidebar
• SidebarFooter - Footer section of the sidebar
• SidebarGroup - Container for grouping sidebar items
• SidebarGroupLabel - Label for a sidebar group
• SidebarGroupContent - Content container for a sidebar group
• SidebarMenu - Menu container for sidebar items
• SidebarMenuItem - Individual menu item container
• SidebarMenuButton - Button component for menu items

Accessibility

Sidebar is built with Radix UI primitives and Vaul for drawer functionality, ensuring full keyboard navigation and screen reader support. The component includes proper ARIA attributes and follows WCAG 2.1 guidelines.