<!-- Class-based breadcrumbs -->
<nav class="mdst-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><span aria-current="page">Widget</span></li>
  </ol>
</nav>

<!-- Arrow separator -->
<nav class="mdst-breadcrumbs mdst-breadcrumbs--arrow" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><span aria-current="page">Page</span></li>
  </ol>
</nav>

<!-- Compact -->
<nav class="mdst-breadcrumbs mdst-breadcrumbs--compact" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><span aria-current="page">Page</span></li>
  </ol>
</nav>