Sidebar
A React component in Beamline's Navigation category.
The app's main navigation: sections, items with counts and one level of sub-pages, an icon rail with tooltips (⌘B, the trigger or the edge), and a sheet on phones.
Use it for
- The main navigation of any multi-section app; usually through app-shell.
Not for
Anatomy
- SidebarProvider
- Sidebar (header, nav, footer, rail)
- SidebarSection
- SidebarItem
- SidebarText
- SidebarTrigger
- SidebarInset
- useSidebar()
Variants
- collapsible: icon, offcanvas, none
- side: left, right
- tone: default, brand, contrast
States
- expanded
- rail
- hidden
- phone sheet
- item active
- sub-pages open
Keyboard
- ⌘B / Ctrl+B toggles
- Tab through items
- in the rail, focus shows the name
Motion
Width changes over 200 ms; the phone sheet slides in. The current page's tone and rule are one plate that travels to the next page chosen as matter (ui/lib/contour.ts); collapsing to the rail or a reflow places it without travel.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nav | { label?, action?, items: { label, icon?, href?, onSelect?, active?, badge?, items? }[] }[] | — | |
header / footer | ReactNode | — | |
collapsible | "icon" | "offcanvas" | "none" | "icon" | |
Provider open / defaultOpen / onOpenChange / storageKey / contained | boolean / string | — | |
SidebarProvider native props / ref | HTMLAttributes<HTMLDivElement> / Ref<HTMLDivElement> | — | Native data/ARIA/event attributes, className, style and ref all address the sidebar layout visual root. Sidebar state, keyboard shortcut and persistence retain their existing contract. |
style / ref | CSSProperties / native Ref | — | |
classNames | SidebarClassNames | — | |
tone | "default" | "brand" | "contrast" | "default" | default: the look's chrome; brand: a deep shade of the brand with light inks; contrast: near-black with light inks. Inks, rules and hovers inside follow on every look and theme. |
Dependencies
lucide-react
Import
import { Sidebar, SidebarText, SidebarSection, SidebarItem, SidebarTrigger, SidebarInset } from "@/components/sidebar/sidebar";Get it
Sidebar is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Navigation
- Breadcrumb: Where a page sits and the way back up; long paths keep the first and last two levels and fold the middle into a menu.
- Menu bar: A desktop-style File / Edit / View bar for editor-like apps; each menu takes the same rows as the dropdown menu, and pointing moves between open menus.
- Navigation menu: A site or docs header whose sections open into one panel that resizes and slides between them; NavigationMenuCard is the standard link row.
- Pagination: Moves through pages of a known length: first, last and the current page's neighbours, with an optional “41–60 of 468”; a phone shows “Page 6 of 24”.
- Stepper: Where someone is in a multi-step flow: done steps carry a check, the current one a ring, and the line between marks fills as steps complete.
- Tabs: Switches between panels of one object; one indicator slides to the active tab, counts sit beside labels, and a long row scrolls instead of wrapping.
- Tree view: Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening.
- User menu: The account menu behind the avatar: who is signed in, status, theme, account pages and sign out with progress; a bottom sheet on phones.