Breadcrumb

An ordered breadcrumb trail in a labelled nav landmark, with the current page marked.

Breadcrumb

Using the breadcrumb accessibly

Use a breadcrumb to show where the current page sits within the site hierarchy and to give a one-tap way back up the trail.

Do

  • Wrap the trail in <nav aria-label="Breadcrumb"> with an ordered list.
  • Mark the last item aria-current="page" and render it as plain text, not a link.
  • List only the real ancestor path, from home down to the current page.

Don't

  • Don't add separators as real text or images — keep them decorative in CSS.
  • Don't link the current page or leave its aria-current off.
  • Don't rebuild the user's browsing history; show the structural trail instead.

Build it right

  • Use an <ol> so assistive tech announces the position and length of the trail.
  • Give the <nav> a unique label such as "Breadcrumb".
  • Generate separators with CSS (for example ::before) and mark them aria-hidden if any markup is needed.
  • Mirror separator direction in RTL so the arrow points the right way.
  • Keep the current page non-interactive and labelled aria-current="page".

The source styles for this component live in assets/css/components/breadcrumb.css.