Build useful breadcrumb navigation

Breadcrumbs show a page’s place in a site hierarchy. They usually link to its parent sections. They are not necessarily a record of the visitor’s click history.

Mark up the hierarchy

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="#home">Example home</a></li>
    <li><a href="#css">CSS lessons</a></li>
    <li><span aria-current="page">Grid columns</span></li>
  </ol>
</nav>
<h1>Grid columns</h1>
<section id="home"><h2>Example home</h2></section>
<section id="css"><h2>CSS lessons</h2></section>

ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: #64748b;
}

The destinations are real sections in this standalone demonstration. A live site would link to real parent pages. The nav’s name distinguishes it from primary navigation. The current page can be text rather than a link; aria-current is optional in that case but makes the intent explicit here.

Keep the trail concise

Use descriptive section names and a consistent order from broad to specific. Allow wrapping on narrow screens. A breadcrumb should supplement the main navigation, not be the only way to find important lessons.

Generated separators are decorative, though announcement behavior can vary across assistive technologies; test your supported combinations. Structured breadcrumb data, when used, must match the visible hierarchy and is separate from the HTML landmark. See nav and semantic structure.

Sources

Reference 1 provide the technical details and current compatibility information.