<

Voyager
Voyager

Breadcrumbs

Breadcrumbs show a user where they are at within the application and help them navigate back to the parent.

HTML Copy 

<nav role="navigation" aria-label="breadcrumb">
    <ol class="qw-breadcrumb">
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Surveys</a></li>
        <li><a href="#" aria-current="page">Pulse Report</a></li>
    </ol>
</nav>

Representing the current location

The current location is given an aria-current attribute to better indicate the user's position within the application to assitive technology. Use aria-current="page" to indicate hierarchy, and aria-current="step" to indicate progression in a multi-step process.