Breadcrumbs

Where a page sits, and the way back up

Breadcrumb

The last item is the page itself, marked as current.

Show the code

<nav aria-label="Breadcrumb example">
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="products-grid.html">Products</a>
</li>
<li>
<span aria-current="page">Butter croissant</span>
</li>
</ol>
</nav>

Long trails

On a phone the trail wraps; nothing is cut.

Show the code

<nav aria-label="Long breadcrumb example">
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="pos-settings.html">Settings</a>
</li>
<li>
<a href="receipt-settings.html">Sales and documents</a>
</li>
<li>
<span aria-current="page">Receipt</span>
</li>
</ol>
</nav>