Sidebar
A collapsible sidebar navigation panel with responsive mobile support.
sidebar-demo.app
Installation
terminal.sh
npx y2kui@latest add sidebarUsage
import {
SidebarProvider,
Sidebar,
SidebarHeader,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarTrigger,
SidebarInset,
} from "@/components/ui/sidebar"
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarTrigger />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>General</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive>Dashboard</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<main>Content</main>
</SidebarInset>
</SidebarProvider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'left' | 'right' | 'left' | Sidebar position. |
variant | 'sidebar' | 'floating' | 'inset' | 'sidebar' | Layout style. |
collapsible | 'offcanvas' | 'icon' | 'none' | 'offcanvas' | Collapse behavior. |
SidebarMenuButton.isActive | boolean | — | Highlight the active menu item. |