Mozilla Protocol
  • 22.0.0

Breadcrumb

A type of navigation menu used to provide a list of links based on current page within the site hierarchy, allowing users to visit previous pages from the current page.

Notes

  • Use <ol> nested with a <nav> to use semantic HTML and structure.
  • Add the class mzp-t-dark for a dark theme.
<nav aria-label="breadcrumbs" class="mzp-c-breadcrumb">
  <ol class="mzp-c-breadcrumb-list">
    <li class="mzp-c-breadcrumb-item">
      <a href="#">Parent page</a>
    </li>
    <li aria-current="page" class="mzp-c-breadcrumb-item">
      Child page
    </li>
  </ol>
</nav>

<p>&nbsp;</p>

<nav class="mzp-c-breadcrumb">
  <ol class="mzp-c-breadcrumb-list">
    <li class="mzp-c-breadcrumb-item">
      <a href="/en-US/">Mozilla</a>
    </li>
    <li class="mzp-c-breadcrumb-item">
      <a href="/en-US/products/">Products</a>
    </li>
    <li class="mzp-c-breadcrumb-item">
      <a href="/en-US/products/monitor/">Monitor</a>
    </li>
    <li aria-current="page" class="mzp-c-breadcrumb-item">
      Digital footprint: What it is and how to manage it
    </li>
  </ol>
</nav>


<p>&nbsp;</p>

<nav class="mzp-c-breadcrumb">
  <ol class="mzp-c-breadcrumb-list">
    <li class="mzp-c-breadcrumb-item">
      <a href="/en-US/">Firefox</a>
    </li>
    <li class="mzp-c-breadcrumb-item">
      <a href="/en-US/features/">Features</a>
    </li>
    <li aria-current="page" class="mzp-c-breadcrumb-item">
      Private browsing mode
    </li>
  </ol>
</nav>