Sidebar
A responsive sidebar navigation component with collapsible states and mobile support.
Import
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
} from "@retents/ui/sidebar"Usage Guidelines
When to use
- For application layouts that need persistent navigation alongside the main content area.
- When your app has multiple top-level sections that benefit from an always-visible navigation.
- For dashboard-style interfaces with grouped navigation items.
When NOT to use
- For website-style navigation — use NavigationMenu instead.
- For simple page layouts with only a few links — a header nav is simpler.
- For temporary overlay navigation — use Sheet instead.
Preview
Features
- Responsive with mobile drawer support
- Collapsible modes:
offcanvas,icon,none - Side variants:
left,right - Visual variants:
sidebar,floating,inset - Submenus, badges, and action buttons
- Controlled or uncontrolled open state
Usage
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<h2>App Name</h2>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>Dashboard</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<main>
<SidebarTrigger />
<div>Page content</div>
</main>
</SidebarProvider>