LifeDS

Component

Sidebar

Composable app navigation shell. Supports collapsible offcanvas/icon modes, floating and inset variants, groups, submenus, badges and tooltips.

Sidebarvariant: sidebar · floating · inset
collapsibleoffcanvas · icon · none
SidebarMenuButtonsize: default · sm · lg · isActive · tooltip
SidebarTriggertoggles open state — ⌘/Ctrl+B
SidebarGroupActionaction button anchored to a group label
SidebarMenuActionshowOnHover — per-item overflow action
SidebarMenuSkeletonshowIcon — loading placeholder row
useSidebar()state · open · toggleSidebar
Playground
Dashboard
Page content area

Basic — collapsible none

Platform
collapsible="none" — always visible, no offcanvas or icon collapse

Collapsible — icon (starts collapsed)

Collapsed by default
Click the trigger or the rail edge to expand

Variant — floating

Floating
variant="floating" — rounded corners, border and shadow around the sidebar

Groups, submenu & user footer

Platform
Workspace
Groups, submenu and user footer with dropdown

Group action

Projects
SidebarGroupAction — button anchored to the group label

Menu action — hover dropdown

Platform
SidebarMenuAction — hover a row to reveal the overflow menu

Loading skeleton

Platform
SidebarMenuSkeleton — placeholder rows while nav data loads

Controlled — useSidebar()

state: expanded · open: true

RTL support

المنصة
dir="rtl" + side="right"

Tokens used

12 semantic tokens consumed by this component.

--sidebarSidebar
bg-sidebar
--sidebar-foregroundSidebar Foreground
text-sidebar-foreground
--sidebar-primarySidebar Primary
bg-sidebar-primarytext-sidebar-primary
--sidebar-primary-foregroundSidebar Primary Foreground
text-sidebar-primary-foreground
--sidebar-accentSidebar Accent
bg-sidebar-accenttext-sidebar-accent
--sidebar-accent-foregroundSidebar Accent Foreground
text-sidebar-accent-foreground
--sidebar-borderSidebar Border
border-sidebar-border
--sidebar-ringSidebar Ring
ring-sidebar-ring
--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--primary-foregroundPrimary Foreground
text-primary-foregroundbg-primary-foreground
--backgroundBackground
bg-background
--borderBorder
border-borderborder