Skip to main content

Breadcrumbs

To Indicate the current page’s location on your website. You can create your navigation hierarchy logic to implement it. Each separator is added by CSS.

Default breadcrumb​

<nav class="breadcrumb">
  <ul>
    <li><a href="#!" class="breadcrumb-link">Home</a></li>
    <li><a href="#!" class="breadcrumb-link">Blog</a></li>
    <li><a href="#!" class="breadcrumb-link is-active">Post title</a></li>
  </ul>
</nav>
<nav class="breadcrumb has-dots">
  ...
</nav>
<nav class="breadcrumb has-arrows">
  ...
</nav>