Design Pattern

Side Navigation

Side navigation is a vertically arranged navigation pattern placed at the side of the page. It works well in content-dense interfaces such as dashboards and documentation, where current location and hierarchy need to remain clear.

Difficulty: Intermediate Category: Navigation

When to use / not use

Use it when

  • When there are many sections, such as in dashboards or admin screens
  • When the link volume does not fit in a horizontal navigation bar
  • When you want to group categories or show hierarchy explicitly

Don't use it when

  • When there are only a few links, such as 3–5 items
  • When keeping it always visible on mobile would squeeze the main content area
  • When the primary goal is switching content within the same page → consider tabs

Anatomy

1 Navigation container (nav element)
2 Navigation list (ul / li)
3 Navigation links (icon and text)
4 Active state indicator (left border)
5 Group header or collapse trigger
  1. Navigation container — Use <nav> plus a label to clarify its purpose
  2. Navigation list — Use list structure to communicate item count and grouping
  3. Navigation links — Combine icons and text to improve scannability
  4. Active state — Show the current page both visually and semantically
  5. Groups / collapse — Organize sections with headings or details

HTML Structure

Key points

  • Use <nav> and an aria-label so it can be distinguished from other navigation regions
  • Structure the links with <ul> and <li>
  • Add aria-current="page" to the current page link
  • Collapsible groups can be implemented cleanly with <details> and <summary>

CSS Implementation

Styling points

  • Give it a stable width so the relationship with the main content remains consistent
  • Show the active state clearly with a left border or background color
  • Visually distinguish group headers from links
  • Use animation, such as rotating the collapse icon, to reinforce state changes

Accessibility

WCAG 2.4.5 Multiple Ways

Side navigation can serve as one path to content and should complement other navigation routes.

WCAG 2.4.8 Location

Combine visual styling with aria-current so users do not lose track of the current page.

WCAG 2.1.1 Keyboard

Both links and collapse triggers need to be operable with the keyboard alone.

Keyboard operation

  • Use Tab to move to links and collapse headers
  • Press Enter to follow a link
  • Use Enter or Space to toggle collapsed sections

Live Demo

Basic side navigation

A basic vertical navigation with a visible active state.

PreviewFullscreen

Grouped navigation

A dashboard-style pattern that organizes links by category.

PreviewFullscreen

Collapsible sections

A variation that uses details and summary to expand and collapse sections.

PreviewFullscreen

Common mistakes

Too much nesting

Once it grows beyond about three levels, both link discovery and orientation become much harder.

Not indicating the current page

The more links you have, the more important it is to show the current location visually and semantically.

Adding JavaScript where HTML and CSS are enough

If a collapsible section can be handled by details, adding JS reduces maintainability.

No mobile consideration

On narrow screens, you often need to switch to a drawer or off-canvas pattern.