Kanbien Design System

Context Nav

The shell-attached section navigation family that stays as a vertical rail on desktop and becomes a bottom navigation bar on mobile.

Status
Signed-off
Primary proof
`CNR-*` canonical set on `/design-system/canonicals/context-nav`
Next promotion step
System-ready verification and first-consumer parity review

Live Surfaces

Review This Pattern

Use the pattern page for contract scope and the linked surfaces for runtime, geometry, and responsive proof.

PrioritycanonicalsContext-nav canonical setexplorationInteractive context-nav explorationrenderDirect context-nav render surface

Contract Highlights

What This Pattern Governs

Desktop keeps an icon-first rail, mobile converts into a deliberate bottom bar, and utility actions stay governed across both modes.

Responsive rule

Rail to bottom bar

Desktop remains a vertical rail while mobile uses a bottom navigation conversion rather than a squeezed or collapsed rail imitation.

Interaction rule

Shared utility grammar

Tooltips, menus, and drawers share the same escape, outside-click, and focus-return posture across the family.

Alternate modes

RTL and magnification

RTL mirrors to the right edge and magnification prefers signed-off fallbacks over overlap, distortion, or hidden current-location state.