Navigation And Search
Sidebars
Persistent left-rail navigation built from row anatomy already proven in Lists And Tables, with the current destination indicated the same way Tab Bars indicates its current page.
Findings
What's actually in /ig
- Persistent left-rail navigation is derived from two confirmed structural parts: the row pattern and the current-page indicator used elsewhere in the system.
Rationale
Why this component exists
A sidebar is a vertical list of destinations, so it inherits the row anatomy already specified for Lists And Tables rather than a bespoke navigation primitive. Highlighting the current destination reuses --ig-highlight-background, the same token the hover/active state uses everywhere else, so 'currently here' simply looks like a permanently-applied hover state.
Usage
When to use it
Use when
Persistent, always-visible navigation across more destinations than a Tab Bar can hold — a desktop-width settings or admin surface.
Avoid when
The viewport is narrow enough that persistent rail navigation would compete with content for space — collapse to a Sheet or Tab Bar instead.
Anatomy
Anatomy
- 01
Rail container
- 02
Destination row (icon + label, Lockup anatomy)
- 03
Current-page highlight
- 04
Section group label
Specification
Spacing, colour, type, and motion
- Row height
- 40–44px, slightly denser than the 50px search row since icons replace avatars
- Current-page fill
- rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha))
- Current-page accent
- 2px leading border in a brand accent colour
- Group label
- system-12, uppercase, rgb(var(--ig-tertiary-text))
- Background
- rgb(var(--ig-primary-background)), separated from content by --ig-separator, not elevation
States
States
| State | Behaviour |
|---|---|
| Default | Rail is visible, rows rest on rgb(var(--ig-primary-background)), and destination labels use the normal Lockup hierarchy. |
| Hover | Destination rows receive rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)) behind the row content. |
| Pressed/Active | Pressed destination rows use an overlay slightly deeper than hover overlay while the navigation action resolves. |
| Focused | The focused destination row uses a 2px var(--ig-stop-magenta) outline with a --radius-xs offset. |
| Current | The current destination keeps the hover-overlay fill applied and adds the 2px leading accent border. |
| Collapsed | Below the small-desktop breakpoint the rail is hidden behind a menu trigger and no row content is squeezed. |
| Expanded | The rail is shown from the menu trigger with the same row height, current marker, and separator treatment as the persistent rail. |
| Disabled | Disabled destinations have opacity reduced and pointer-events none while the rail container itself remains visible. |
Examples
Real interface compositions
Desktop navigation
Professional dashboard rail
Insights, Content, Messages, and Settings appear as dense lockup rows; the active destination uses a persistent hover tint plus a leading brand accent and collapses behind a menu trigger on narrow screens.
40–44px rows, --ig-hover-overlay-rgb, 2px accent, 1024px collapse
Guidance
Usage guidance
- Indicate the current destination with the same highlight tint used for hover/active states elsewhere, plus a leading accent border — don't invent a second 'active' visual language distinct from the rest of the system.
Responsive
Responsive behaviour
- Collapse the rail behind a menu trigger below the documented small-desktop breakpoint (1024px) rather than shrinking row content — see Layout & Grid.
Do / Don't
Do / Don't
Do
- Source colours from --ig-secondary-background/--ig-highlight-background, which are confirmed real tokens, while treating the rail layout itself as derived.
Don’t
- Present this site's own sidebar CSS as direct Instagram source — it was authored for this documentation site using the same tokens.