Collapsed side nav

Icon-only rail variant. Used when the user wants more canvas space or on narrower windows. Each item exposes its label via aria-label and shows a Tooltip on hover. Badges float top-right. Items without an href or onClick render as inert static previews.

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

Default

56px icon rail

Component documentation

Collapsed Side Nav

components/shell/collapsed-side-nav.tsx

Purpose

Renders the icon-only collapsed state of the application side navigation.

Appropriate use

Use when the main navigation is intentionally collapsed but destinations still need labels through tooltips and accessible names.

Example

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

States

Supports current and ordinary items, optional counts, optional footer, workspace initials, and an expansion action.

API and props

CollapsedSideNav accepts workspaceInitials, items, onExpand, footer, and className; each item supplies id, label, icon, and optional href, onClick, badge, or active state.

Dependencies

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

Accessibility

Uses a labelled complementary region, marks the current destination, gives count badges readable context, and exposes labels through links and tooltips.

Limitations

It does not manage expanded state, routing side effects, or responsive breakpoints; without onExpand, the expansion button is present but inert.

Source

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

Full pack

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