Side nav

Primary navigation column. 244px fixed, soft chrome, white-pill active state. Grouped sections, optional badges, status dots, and a footer slot.

Included in the single kansho full pack. Components are not offered as separate installs.

Default

Expanded — 244px

Component documentation

Side Nav

components/shell/side-nav.tsx

Purpose

Renders the expanded workspace navigation with grouped destinations and collapse control.

Appropriate use

Use as persistent product navigation when destinations need labels, optional metadata, current state, and grouped hierarchy.

Example

components/shell/side-nav.tsx has a representative live example in the "Default" section on /components/side-nav.

States

Supports grouped and collapsible sections, current and disabled items, icons, badges, status text twins, custom footer, configurable width, and an optional shell-collapse action.

API and props

SideNav accepts workspace, sections, footer, onCollapse, collapsible, width, and className; sections and items use the exported SideNavSection and SideNavItem contracts.

Dependencies

React, Lucide icons, AgentDot, and the Kansho cn utility.

Accessibility

Uses a labelled complementary region containing navigation links, marks current links, exposes disabled state, and names the collapse control; visible labels carry meaning beyond icons and colour.

Limitations

It renders navigation structure but does not manage routing, collapsed state, mobile drawer behaviour, or permission-based item filtering.

Source

Source: components/shell/side-nav.tsx.

Full pack

components/shell/side-nav.tsx is documented at /components/side-nav and installs only through the single Kansho full pack; no individual component install is offered.