SideNav
v1.0.9Updated 19 Oct 2026Reusable left-rail navigation with sections, nested items, count pills, optional search, sticky positioning, footer slot, and card / flush visual variants. Lighter-weight alternative to Sidebar for inner panels.
Preview
Live · 12 stories▸Why this is recommendedsidenavnavleft-railsections+4
The default, out-of-the-box SideNav.
- ✓Inner-page side navigation (settings, docs)
- ✓Filter / facet rail
- ✓Help-content nav
- ✓Dashboard sub-nav
- Sections with optional headings
- Nested items
- Count pill per item
- Optional search filter
- Sticky positioning
- Footer slot
- Card vs flush variants
- i18n: labels prop overrides every built-in UI string (nav aria-label, filter placeholder/aria, empty state, Expand/Collapse {label} templates); merged over DEFAULT_SIDE_NAV_LABELS
- Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a), nested rows included
- ✕Primary app nav (use Sidebar)
- ✕Tabbed views (use Tabs)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
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
sectionsSections with items
yessearchableShow search filter
—stickySticky on scroll
—variantVisual style
—labelsOverride any built-in UI string (i18n): nav aria-label, filter placeholder/aria, empty state, Expand/Collapse {label} templates. Merged over DEFAULT_SIDE_NAV_LABELS
—linkComponentThe host app link component for every row that has an href, nested rows included. Defaults to a plain anchor (full document reload in a routed app). SideNavItem.onClick receives the click EVENT. Rows carry data-slot="side-nav-link". MCP feedback fb_bf7dc63a.
—