Navigation

Breadcrumb

Available

Navigation showing the current location within a site. Uses nav, a list structure, and aria-current for the current page.

What Is a Breadcrumb?

A breadcrumb is a navigation pattern that shows the current location within a site hierarchy, such as "Home > Products > Shoes > Running," and provides quick access to parent levels. It is typically placed near the top of the page.

Visually it looks like a simple row of links, but it is important to convey the proper structure to assistive technology: "this is a navigation landmark, it contains an ordered list, and the last item is the current page."

Why Does Accessibility Matter?

Screen reader users can jump directly to the breadcrumb via landmark navigation when <nav> is labeled. Using <ol> causes the screen reader to announce "list, 4 items," conveying the depth of the hierarchy.
Adding aria-current="page" to the last item causes it to be announced as "current page," making the user's location explicit. Not making it a link also avoids a pointless link to the same page.
Using literal ">" or "/" text as separators causes screen readers to read each character aloud (e.g., "greater than"), which is distracting. Drawing separators with CSS pseudo-elements prevents them from being announced.

Live Demo (Recommended Implementation)

Below is a breadcrumb built according to the APG. Links are navigable with Tab, and the last item ("Running") is the current page and is not a link.

Breadcrumb: nav > ol > li > a

Try it: Tab through the links. The last item, Running, does not receive focus (it is the current page and not a link). With a screen reader, you will hear: navigation, list, 4 items, ...current page.

Tip

A link with aria-current="page" is announced as "current page." It is common to make the current page a non-link text node or an element with aria-current rather than an active link. (In this demo, aria-current is applied to an <a> tag for demonstration purposes.)

Keyboard Interaction

Key	Action	Priority
`Tab` / `Shift` + `Tab`	Move to the previous/next link (same as regular links)	Required
`Enter`	Navigate to the focused link destination	Required

Note

A breadcrumb is simply a row of links. No special key handling is required -- using <a href> gives you keyboard navigation automatically. There is no need for arrow-key navigation or other complex interactions.

Required WAI-ARIA Roles and Properties

Target	Attribute / Role	Meaning
Outer container	`<nav aria-label="Breadcrumb">`	Makes it a navigation landmark, distinguished by its label.
Link sequence	`<ol> > <li>`	Uses an ordered list to convey the number and order of hierarchy levels.
Current location item	`aria-current="page"`	Indicates this is the current page. Should not be a link.
Separator characters	`(CSS ::before)`	"/" and ">" are decorative. Render via CSS pseudo-elements instead of text to exclude them from screen reader output.

Implementation: Recommended Pattern (Good)

Good / Recommended

Wrap in a labeled <nav>, use <ol> > <li> > <a>. Mark the current page with aria-current="page".

Markup:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/shoes">Shoes</a></li>
    <!-- The current page is not a link; use aria-current="page" -->
    <li><a href="/products/shoes/running" aria-current="page">Running</a></li>
  </ol>
</nav>

Draw separators with CSS (not as text):

/* Draw separators with CSS pseudo-elements (not read by screen readers) */
nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}
nav[aria-label="Breadcrumb"] li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--text-muted);
}

Anti-Pattern (Bad)

Below is a breadcrumb built with only <div>, links, and literal ">" text.It looks the same, but it is not a navigation landmark, not a list, and the current page is not indicated.

Breadcrumb with div and > Text Only

Home >Products >Shoes >Running

Try it: With a screen reader, you cannot jump to nav, it is not announced as a list, each > separator is read as 'greater than,' and the current page is not identified.

<!-- div and ">" text only -->
<div class="crumbs">
  <a href="/">Home</a> &gt;
  <a href="/products">Products</a> &gt;
  <a href="/products/shoes">Shoes</a> &gt;
  <span>Running</span>
</div>
<!-- No nav, no ol/li, and the current page is not indicated -->

Bad / Avoid

Problems with this implementation:

No landmark -- without <nav>, users cannot jump directly to the breadcrumb.
No list structure -- without <ol>/<li>, the number of items is not conveyed.
Current page is not indicated -- without aria-current="page", users cannot tell where they are.
Separators are read aloud -- literal ">" characters are announced one by one, which is distracting.

Implementation Checklist

Wrapped in <nav aria-label="...">
Content is an <ol> > <li> ordered list
Each level is an <a href> (keyboard navigable)
Current location has aria-current="page" and is not a link
Separator characters are rendered via CSS pseudo-elements, not as text
Focus ring is not removed

Source (English):Breadcrumb Pattern — W3C APG(opens in a new tab)