Sidebar

The sidebar family provides the fixed left rail framing every authenticated screen: brand header, scrollable nav body with groups and sub-menus, and a user footer. Two states are the admin-app default: expanded (224 px, --vueda-sidebar-width) and collapsed icon rail (48 px, --vueda-sidebar-width-icon). Floating, inset, offcanvas-mobile, and right-side variants exist in source but are not covered here.

Demos below use collapsible="none" to pin the sidebar inside a bounded frame. Default skin gaps are visible by design: they are what this page exists to illuminate.

Theme keys: SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton (no theme key), SidebarMenuBadge, SidebarMenuAction, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSkeleton, SidebarInput, SidebarSeparator, SidebarInset, SidebarRail, SidebarTrigger, SidebarUserBlock.

Expanded shell

Full 224 px rail. Header carries the brand mark and sidebar trigger. Nav body groups are 11 px uppercase eyebrow labels. Active item shows bg-sidebar-accent + font-medium. Badge counts sit at the right edge. Sub-menu indents under the open parent.

Collapsed icon rail

48 px rail. Group labels, badges, sub-menus, search, and user identity meta all hide. Only icons remain. Active item retains the bg-sidebar-accent fill so location is readable without a tooltip.

Anatomy

Individual pieces of the sidebar surface. All cells share a single SidebarProvider so useSidebar() resolves correctly.