Skip to main content

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 #


<nav role="navigation" aria-label="Breadcrumbs">
<ol class="rvt-breadcrumbs">
<li>
<a href="#">
<span class="rvt-sr-only">Home</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="m8 .798 7 4.667V15H9v-4.444H7V15H1V5.465L8 .798ZM3 6.535V13h2V8.556h6V13h2V6.535L8 3.202 3 6.535Z"/></svg>
</a>
</li>
<li><a href="#">Tier two</a></li>
<li aria-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