SideNav
v1.0.4Updated 27 Aug 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 storiesDefaultOpen ↗
▸Why this is recommendedsidenavnavleft-railsections+4
The default, out-of-the-box SideNav.
Recommended for+14
- ✓Inner-page side navigation (settings, docs)
- ✓Filter / facet rail
- ✓Help-content nav
- ✓Dashboard sub-nav
Tags+6
sidenavnavleft-railsectionsnestedstickylayoutdefault
Features+4
- 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
Not recommended for−2
- ✕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
PropTypeRequired
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
—