build69
build69  /  Components  /  Navigation  /  Sidebar

Sidebar

v1.0.17Updated 19 Oct 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
  • ✓A Next.js or React Router app whose menu must navigate without reloading the page
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
  • Client-side routing: `linkComponent` renders every href row with the host link (next/link, React Router Link) instead of a plain anchor
  • Tells an ancestor when a row navigated: wrap in `SidebarNavigateBoundary` and a temporary surface (AppShell mobile drawer, a custom drawer) can close itself — fires for href rows only, and not for a modifier or non-primary click
  • Link `onClick` receives the click event, so a host can preventDefault and route itself
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?, onClick? } (icon required; nest via children). `onClick` receives the click EVENT, so a host can event.preventDefault() and hand the destination to its router; a row with onClick and no href renders a button. `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>—
linkComponent

The host app link component used for EVERY row that has an href — nav links, nested children, pinned items and recent items. Pass next/link or React Router Link so a menu click routes client-side; the default plain anchor reloads the whole document, loses client state, and a click landing before the new page hydrates does nothing. It receives the anchor props the built-in link got (href, className, aria-current, onClick). MCP feedback fb_bf7dc63a.

SidebarLinkComponent—

Related

Platform docsAll componentsSource files