Breadcrumbs

Show the user's current location in a page hierarchy

Overview #

Use the breadcrumbs component to show the user’s current location in a hierarchy of pages. Pages further up the hierarchy from the current page are linked.

Examples #

Choose an example

Open in new window Copy link to example

<nav role="navigation" aria-label="Breadcrumbs">
  <ol class="rvt-breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Tier two</a></li>
    <li aria-label="Current page">Tier three</li>
  </ol>
</nav>

Usage #

Do

Use when your website or web application's page hierarchy is at least two levels deep

Don't

Use when your website or web application's page hierarchy is only one level deep