Breadcrumb

Breadcrumbs display the current page's location within a navigational hierarchy and provide a trail of links back to the top level.

Basic example

HTML
<nav aria-label="breadcrumb">
  <ol class="ms-breadcrumb">
    <li class="ms-breadcrumb-item"><a href="#" class="ms-breadcrumb-link">Home</a></li>
    <li class="ms-breadcrumb-item"><a href="#" class="ms-breadcrumb-link">Library</a></li>
    <li class="ms-breadcrumb-item active"><span class="ms-breadcrumb-link">Data</span></li>
  </ol>
</nav>

Custom separator

Add ms-breadcrumb--custom-separator to replace the default > separator with a » glyph.

HTML
<ol class="ms-breadcrumb ms-breadcrumb--custom-separator">
  <li class="ms-breadcrumb-item"><a href="#" class="ms-breadcrumb-link">Home</a></li>
  <li class="ms-breadcrumb-item active"><span class="ms-breadcrumb-link">Data</span></li>
</ol>
<