Navigation overview

How the primary app-shell rail and the SecondaryNav rail sit together. Small neutral icon tiles and a soft gray selection identify primary destinations directly on the app background. The secondary rail keeps a compact list with a blue selected label.

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. The primary rail uses small icon tiles and a neutral selected row; the secondary rail uses a blue label and faint fill to keep the active destination visible in a long list.