Navigation overview

How the primary app-shell rail and the SecondaryNav rail sit together. The two levels share one visual language (pill radius, gray-600 resting copy, brand-blue active, the same color glide) but stay distinguishable: the primary's active leaf is blue text only, while the secondary adds a faint fill so a long, scannable list keeps a 'where am I' cue.

Primary + secondary, in context

The real AppShell + AppShellSidebar (primary) with the SecondaryNav competitive-intelligence rail nested inside the page card (secondary). This is their true spatial relationship — compare the active treatments across the two levels.

Competitive intelligence

Primary rail (far left) → secondary rail (this card's left edge) → content. Both rails share the pill radius, gray-600 resting copy, and the blue active label; the secondary keeps a faint fill so the active row stays locatable in a long list.