Sidebar

Anatomy

Wrap everything in SidebarProvider. It manages open state (persisted to a sidebar_state cookie), a ⌘/Ctrl+B toggle, and swaps the sidebar for a mobile drawer on small screens. Read or toggle state anywhere via useSidebar().

Import

import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
  useSidebar,
} from "@mikenotthepope/substrateui"

Composition

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       └── SidebarMenu
│   │           └── SidebarMenuItem
│   │               └── SidebarMenuButton
│   └── SidebarFooter
└── SidebarInset
    └── SidebarTrigger

When to use this vs. App Shell

AppShell is a lightweight, opinionated side-nav layout — reach for it first. Use Sidebar when you need collapse-to-icon, floating/inset variants, nested submenus, badges, or programmatic control over the open state.

Labels

The trigger is an icon button, and the mobile sheet needs a title and description whether or not the design shows them. Override one instance with the labels prop, or every instance at once through LabelsProvider's sidebar key — the provider is how you translate the set once instead of at each call site.

Direction

Accessibility

API Reference

SidebarProvider owns the open state; everything else reads it from context. The remaining parts — groups, menus, badges, skeletons, the rail — take plain element props and are best read from the anatomy above.

Sidebar