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.
<ol>
nested with a <nav>
to use semantic HTML and structure.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> </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> </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>