Sidebar
Organize application navigation in an expandable side panel.
Preview
Import
import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarItem } from "@sigil-ui/components";Usage
<Sidebar className="relative h-[calc(var(--s-grid-cell)*6)] border border-[var(--s-border)]">
<SidebarHeader>Navigation</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Menu</SidebarGroupLabel>
<SidebarItem>Dashboard</SidebarItem>
<SidebarItem>Settings</SidebarItem>
</SidebarGroup>
</SidebarContent>
</Sidebar>Sub-components
This component includes the following parts:
<SidebarHeader><SidebarContent><SidebarFooter><SidebarGroup><SidebarGroupLabel><SidebarItem>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultCollapsed | boolean | — | Start in collapsed (icon-only) mode. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-border-style | Border style |
--s-surface | Surface |
--s-text | Text |
--s-duration-normal | Duration normal |
--s-sidebar-width | Sidebar width |
--s-radius-full | Radius full |
--s-text-muted | Text muted |
--s-shadow-sm | Shadow sm |
--s-duration-fast | Duration fast |
--s-primary | Primary |
--s-radius-md | Radius md |