Breadcrumb

Show the current page’s location within a navigational hierarchy.

For more information on breadcrumbs, including how to change the separator and add accessibility features, see Bootstrap Breadcrumbs documentation.

Default

To create a breadcrumb navigation list, assign the .breadcrumb class to an ordered list element. Assign the .breadcrumb-item class to any list items representing parent pages, and .breadcrumb-item active class to the page the user is currently on.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Base</a></li>
    <li class="breadcrumb-item"><a href="#">Page Link</a></li>
    <li class="breadcrumb-item active" aria-current="page">Current Page</li>
  </ol>
</nav>