UX Patterns Guide

Application · lesson 8 of 21 · Navigation And Wayfinding

Side navigation

Underlying principle: Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

Provide persistent side navigation scoped to the current area, with short hierarchical labels, expanded active ancestors, an unmistakable current-page state, and predictable behavior across route changes and viewport changes.

Start with the decision

Does this fit your task?

A product area has several related pages arranged in a visible hierarchy.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Try the live example →Compare alternatives →
Study the interaction

Follow the task before choosing the component

Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

01 / Recognize the need

What the person is doing

A section has enough related pages that page-level links or tabs become too shallow.

02 / Design the response

What the interface must communicate

Provide persistent side navigation scoped to the current area, with short hierarchical labels, expanded active ancestors, an unmistakable current-page state, and predictable behavior across route changes and viewport changes.

Default state with the local section hierarchy visible beside content.

03 / Judge the outcome

What to look for

Is this side navigation scoped to one section, or is it a second global nav?

Activating a side-nav item changes the local page and updates current-page semantics.

Practice this pattern: Sketch side navigation for this situation: A product area has several related pages arranged in a visible hierarchy. Include this state: Default state with the local section hierarchy visible beside content. Review your sketch with this question: Is this side navigation scoped to one section, or is it a second global nav?

Study the Navigation And Wayfinding family →Read the underlying principle →
Decision first

Choose this pattern when the problem matches

Use when

  • A product area has several related pages arranged in a visible hierarchy.
  • Users need to move repeatedly among siblings and children in one section.

Avoid when

  • The destinations are top-level product areas that belong in global navigation.
  • The options are sibling panels inside one page and should be tabs or segmented controls.
  • The navigation must be temporary or dismissible because screen space is severely constrained.

Problem it prevents

A section has enough related pages that page-level links or tabs become too shallow.

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Side navigation in the lab
Pattern anatomy

What a strong implementation has to make clear

User need

A section has enough related pages that page-level links or tabs become too shallow.

Pattern promise

Provide persistent side navigation scoped to the current area, with short hierarchical labels, expanded active ancestors, an unmistakable current-page state, and predictable behavior across route changes and viewport changes.

Required state

Default state with the local section hierarchy visible beside content.

Failure to inspect

Side navigation becomes a duplicate global navigation system.

Access contract

Use a labeled navigation landmark that distinguishes local side navigation from primary navigation.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current.
  • The active item has a text label, selected border, and semantic current state rather than color alone.
  • The page heading matches the active side-nav item while the global header remains separate above it.
  • Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded.
Weak implementation

Vague, hidden, hard to recover from

  • The side navigation highlights Settings while the page heading is Audit log.
  • A collapsed Security parent hides the current Audit log page.
  • Users must reopen a drawer every time they move between sibling pages in the same desktop section.
  • The current page disappears because only top-level parents are shown until hovered.
UI guidance
  • Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator.
  • Keep the side navigation visually subordinate to global navigation and structurally tied to the content section it controls.
UX guidance
  • Use side navigation to help users move within a complex section without losing the current page's position in that section.
  • Keep active ancestors expanded and labels short so users can scan nearby pages without reopening navigation or interpreting a hidden hierarchy.
Implementation contract

What the implementation must handle

States

  • Default state with the local section hierarchy visible beside content.
  • Current page state that matches the content heading and route.
  • Expanded parent state when a child or grandchild page is active.
  • Scrollable long-list state with current item still reachable and visible.

Interaction

  • Activating a side-nav item changes the local page and updates current-page semantics.
  • The current item's parent chain remains visible after navigation and direct deep links.
  • Collapsing a parent with the current page either remains blocked, keeps a current summary visible, or clearly indicates the hidden current page.
  • Keyboard focus moves through parent toggles and child links in reading order, then proceeds to main content.

Accessibility

  • Use a labeled navigation landmark that distinguishes local side navigation from primary navigation.
  • Ensure parent toggles announce expanded or collapsed state.
  • Tab reaches parent toggles, visible child links, and then main content in a predictable order.
  • Enter activates links; Enter or Space toggles collapsible parent groups.

Review

  • Is this side navigation scoped to one section, or is it a second global nav?
  • Are labels short enough to scan in a narrow side column?
  • What happens to current state when a parent is collapsed or the viewport narrows?
  • Would tabs, breadcrumbs, in-page navigation, or global navigation better match the user's movement?
Evidence trail

Source-backed claims behind this guidance

USWDS Side navigation component

U.S. Web Design System - checked

USWDS defines side navigation as hierarchical side-of-page sub-navigation with one to three levels, active current page state, and short labels.

Carbon UI Shell left panel style

IBM Carbon Design System - checked

Carbon documents fixed left-panel side-nav structure, selected indicators, indentation, and full-height placement.

Material Design Navigation drawer

Material Design - checked

Material navigation drawer guidance clarifies the drawer variant and focus management when side navigation is dismissible.

Full agent/debug reference

Problem Context

  • A section has enough related pages that page-level links or tabs become too shallow.
  • Users often move among sibling and child pages inside one product area.
  • The product already has global navigation, so local hierarchy needs a secondary but persistent place.

Selection Rules

  • Choose side navigation when users need persistent access to related pages in one section or area.
  • Keep the hierarchy to one to three visible levels; deeper structures need information architecture cleanup, search, or another navigation model.
  • Show the current page and expand its parent chain on deep links and route changes.
  • Use short labels derived from page titles rather than full marketing or legal headings.
  • Keep global destinations, account utilities, and sign-out controls out of local side navigation.
  • Use tabs instead when the destinations are shallow sibling panels for one object, and use a drawer when the navigation must be dismissible on constrained screens.

Required States

  • Default state with the local section hierarchy visible beside content.
  • Current page state that matches the content heading and route.
  • Expanded parent state when a child or grandchild page is active.
  • Collapsed parent state that does not hide the user's current location.
  • Scrollable long-list state with current item still reachable and visible.
  • Responsive state that turns into a drawer or menu only when space requires it.

Interaction Contract

  • Activating a side-nav item changes the local page and updates current-page semantics.
  • The current item's parent chain remains visible after navigation and direct deep links.
  • Collapsing a parent with the current page either remains blocked, keeps a current summary visible, or clearly indicates the hidden current page.
  • Side navigation does not reset unrelated local filters, drafts, or scroll state unless the route change requires it and the user is warned.
  • Keyboard focus moves through parent toggles and child links in reading order, then proceeds to main content.
  • Responsive drawer variants restore focus to the opener when dismissed and keep the same local hierarchy.

Implementation Checklist

  • Derive side-nav structure from the current section's information architecture rather than the full product route table.
  • Use a labeled navigation landmark and mark the current page programmatically.
  • Expand active ancestors on first render, direct links, and back/forward navigation.
  • Limit nesting depth and test whether users can find lower items without excessive scrolling.
  • Keep side navigation visually separate from global navigation and page actions.
  • Define responsive behavior for when the side nav becomes a drawer, collapses to a menu, or moves below the heading.
  • Preserve local page state where appropriate when users move between sibling pages.

Common Generated-UI Mistakes

  • Duplicating global navigation links in the side navigation.
  • Letting the highlighted item drift from the page heading or route.
  • Hiding the active child under a collapsed parent.
  • Building a five-level tree that users cannot scan.
  • Using side navigation for one or two pages that do not need hierarchy.
  • Replacing persistent desktop side navigation with a hamburger drawer that users must reopen for every sibling page.

Critique Questions

  • Is this side navigation scoped to one section, or is it a second global nav?
  • Can a deep-linked user see the current page and its parent without clicking?
  • Are labels short enough to scan in a narrow side column?
  • What happens to current state when a parent is collapsed or the viewport narrows?
  • Would tabs, breadcrumbs, in-page navigation, or global navigation better match the user's movement?
Accessibility
  • Use a labeled navigation landmark that distinguishes local side navigation from primary navigation.
  • Expose the current page or current location programmatically, not only through color or border.
  • Ensure parent toggles announce expanded or collapsed state.
  • Keep focus visible and do not trap focus in persistent side navigation.
  • Avoid CSS-only reordering that changes visual order without matching DOM and focus order.
Keyboard Behavior
  • Tab reaches parent toggles, visible child links, and then main content in a predictable order.
  • Enter activates links; Enter or Space toggles collapsible parent groups.
  • Escape closes responsive drawer variants and returns focus to the opener.
  • The active child remains reachable by keyboard after route changes and parent expansion.
  • Long side navigation should not require keyboard users to traverse unrelated global links before content on every page.
Variants
  • Fixed left side navigation
  • Section side navigation
  • Nested side navigation
  • Collapsible side navigation
  • Side navigation with icons
  • Responsive side navigation drawer

Verification

Source trail checked:

Saved items