Kanbien Design System

Navigation Shell

The shared shell contract for brand lockup, primary navigation, overflow handling, mobile navigation collapse, and account affordances.

Status
Active
Primary proof
`top-nav` canonical family and exploration surface
Primary consumers
`/design-system` now, `rootAdminShell` as the governed adoption target

Live Surfaces

Use the pattern page for intent and the linked live surfaces for rendered proof.

PrioritycanonicalsTop-nav canonical set explorationInteractive top-nav exploration componentDirect top-nav render surface

Contract Highlights

Keep the shell stable across desktop, overflowed desktop, and collapsed mobile states without inventing page-local navigation behavior.

Anatomy

Shared shell parts

Brand lockup, primary navigation region, overflow behavior, utility region, and mobile navigation surface stay in one governed family.

Responsive Rule

Measured fit first

Desktop overflow and mobile collapse should come from actual fit pressure rather than page-local breakpoint guesses.

Adoption

Cross-page shell reuse

This pattern exists so app surfaces can inherit one shell grammar instead of rebuilding top navigation for each page family.