Atlas Design

Breadcrumbs

Use breadcrumbs to show navigation from the current location to less specific locations. Note that the final item representing the current page is not presented.

HTML 
<nav aria-label="breadcrumb example">
    <ol class="breadcrumbs">
        <li class="breadcrumbs-item">
            <a href="#">Domain</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Kingdom</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Phylum</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Class</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Order</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Family</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Genus</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Species</a>
        </li>
    </ol>
</nav>

Representing the current location

The final item representing the current page is omitted in the default example. If for some reason it must be included add .breadcrumbs-item-current to the final item along with aria-current="page" attribute and wrap it into a span instead of an anchor tag. This will remove the separator and apply a semibold font weight to indicate the current page.

HTML 
<nav aria-label="breadcrumb example highlighting current location">
    <ol class="breadcrumbs">
        <li class="breadcrumbs-item">
            <a href="#">Family</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Genus</a>
        </li>
        <li class="breadcrumbs-item breadcrumbs-item-current" aria-current="page">
            <span>Species</span>
        </li>
    </ol>
</nav>

An initial chevron

Some situations may require the inclusion of a chevron before the first breadcrumb item. If this is the case, you can achieve this with .breadcrumbs.breadcrumbs-initial-separator.

Size modification with Atomics

By default .breadcrumbs are just slightly smaller than the document's font size. However, you may use font size atomics to easily change the size of all the breadcrumbs. See example below, where font-size-xl is applied the the .breadcrumbs element.

HTML 
<nav aria-label="breadcrumb example with size modification">
    <ol class="breadcrumbs font-size-xl">
        <li class="breadcrumbs-item">
            <a href="#">Domain</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Kingdom</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Phylum</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Class</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Order</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Family</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Genus</a>
        </li>
        <li class="breadcrumbs-item">
            <a href="#">Species</a>
        </li>
    </ol>
</nav>

Figma

Flying flyout