Breadcrumbs

Breadcrumbs show the user's current location in the website's hierarchy.

Breadcrumbs use the nav element with an ol inside it. We use an ordered list since breadcrumbs signify the sequence of locations in the website’s hierarchy.

<nav class="breadcrumb" aria-label="breadcrumbs">
    <ol>
        <li><a href="#">Zirconium</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#" aria-current="page">Breadcrumb</a></li>
    </ol>
</nav>

Full-width breadcrumb

You can add the class .full-width to a breadcrumb to remove its border radius when it spans the full width of its parent.

<nav class="breadcrumb" aria-label="breadcrumbs">
    <ol>
        <li><a href="#">Zirconium</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#" aria-current="page">Breadcrumb</a></li>
    </ol>
</nav>

Sizes

You can apply the size utility classes to your breadcrumbs to change their sizes.