Design Pattern

Breadcrumb

A breadcrumb is a navigation that shows where the current page sits in the site hierarchy. The basic approach is nav with ol / li, and aria-current to mark the current page.

Difficulty: Beginner Category: Navigation

When to use / not use

Use it when

  • When the site hierarchy is deep and you want to offer a path back to higher levels
  • When drilling from a category or list into details, and you want the current location to be clear
  • When pages can be reached through multiple paths and a supplementary nav is helpful

Don't use it when

  • A simple one-level site where the current location is obvious
  • When you want to fake a hierarchy that doesn't match the real information structure
  • When you want it as a history-style "back" control → this differs from browser back

Anatomy

1 Navigation container (nav element)
2 Ordered list (ol / li elements)
3 Links (navigation to higher levels)
4 Separators (visual dividers between levels)
5 Current page (no link, marked with aria-current)
  1. nav — The landmark that wraps the breadcrumb. Add an aria-label that describes its purpose
  2. ol / li — Mark up with an ordered list because hierarchy implies order
  3. Links — The way to go back up the hierarchy. Everything except the current page is a link
  4. Separators — Treated as decoration; don't let screen readers announce them
  5. Current page — Mark with aria-current="page" and usually don't link it

HTML Structure

Key points

  • Give the <nav> element an aria-label like "Breadcrumb" to state its purpose
  • Use <ol> because order matters
  • Set aria-current="page" on the last item
  • Draw separators with a CSS pseudo-element or an element with aria-hidden

CSS Implementation

Styling points

  • Use Flexbox for horizontal layout and handle wrapping
  • Differentiate the current page with a link color, background, or bold weight
  • Draw separators as pseudo-elements (not text nodes) to control screen reader output
  • On mobile, avoid cramped rows and ensure enough whitespace and visibility

Accessibility

WCAG 2.4.8 Location

With aria-current="page", the current page is identifiable both programmatically and visually.

WCAG 1.3.1 Info and Relationships

Using <ol> conveys hierarchy and order to assistive technology.

Keyboard operation

  • Use Tab to move between links (the current page is usually skipped)
  • Press Enter to follow a link
  • Screen readers can grasp the landmark and list structure together

Live Demo

Basic breadcrumb

A simple breadcrumb with plain separators.

PreviewFullscreen

With icons

A variation using a home icon and icon separators.

PreviewFullscreen

Custom styling

An example that emphasizes the current location with background color and rounded corners.

PreviewFullscreen

Common mistakes

Marking it up with div

Without nav and ol, you lose the navigation landmark and hierarchical semantics.

No aria-current on the current page

Assistive technology can't tell that the last item is the current location.

Separators get announced

Raw ">" or "/" characters become noise; treat them as decoration.

Using ul

Breadcrumbs are ordered, so an ordered list is more appropriate than an unordered one.