build69
Sign inGet API key
build69  /  Components  /  Navigation  /  Sidebar

Sidebar

v1.0.9Updated 27 Aug 2026

Primary vertical navigation panel. Sections with collapsible groups, item badges, active highlight, and collapsed/expanded states. The "MA" workspace badge centers correctly in collapsed icon-only mode.

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendednavsidebarmenushell+1

The default, out-of-the-box Sidebar.

Recommended for+14
  • ✓Primary nav of every app page
  • ✓A left menu users can shrink to an icon rail and expand back
Tags+6
navsidebarmenushelldefault
Features+4
  • Built-in shrink/expand toggle (`collapsible`) — icon rail and back, no consumer state needed
  • Collapsible (icon-only) mode, controlled via `collapsed` or uncontrolled
  • Grouped sections with separators
  • Item badges (count / dot)
  • Active route highlight
  • Footer slot for user / workspace
Not recommended for−2
  • ✕In-page tab navigation (use Tabs)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Sidebar" })

Usage

import { Sidebar } from '@/components/navigation/sidebar';

const sections = [
  { title: 'Workspace', links: [
    { label: 'Home', href: '/', icon: <Home /> },
    { label: 'Orders', href: '/orders', icon: <ShoppingCart />, count: 3 },
  ] },
];

<Sidebar sections={sections} activeHref="/orders" collapsible />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
collapsed

Collapsed icon-only rail. Pass to control the state; omit with `collapsible` for built-in toggling

boolean—
collapsible

Render the built-in shrink/expand footer control (uncontrolled unless `collapsed` is passed)

boolean—
defaultCollapsed

Initial state when uncontrolled and `collapsible`

boolean—
onCollapsedChange

Fired when the built-in control toggles

(collapsed: boolean) => void—
sections

Grouped navigation. Each SidebarSection = { title?: ReactNode, links: SidebarLink[] }; a SidebarLink = { label, href, icon, id?, count?, active?, description?, children? } (icon required; nest via children). `description` adds a hover/focus tooltip explaining where the link goes — shown in BOTH expanded and collapsed modes, with the label as its heading; omit it for the previous behaviour (no tooltip while expanded). `title` is a ReactNode so a section heading can carry an affordance beside its name. MCP feedback fb_94f476df.

ReadonlyArray<SidebarSection>—
activeHref

Active link href, matched against SidebarLink.href for the active highlight

string—
appBrand

Brand/workspace block at the top (label + icon/initials)

SidebarBrand—
pinned

Pinned items rendered above sections; pairs with onPin / onUnpin

ReadonlyArray<SidebarPinnedItem>—
recent

Recent items rendered at the bottom of the scroll area

ReadonlyArray<SidebarRecentItem>—
workspace

Workspace footer (name + storage meter) above the user block

SidebarWorkspaceFooter—
user

Footer user pill; onUserClick opens an account menu

SidebarUser—
labels

i18n overrides merged over DEFAULT_SIDEBAR_LABELS

Partial<SidebarLabels>—

Related

Platform docsAll componentsSource files