Breadcrumb

The breadcrumb is a navigation component, which can be used to indicate the current page’s location within a navigational hierarchy. The separators are added automatically in CSS using pseudo-elements (.breadcrumb-item:before {...}).

<nav aria-label="Breadcrumb navigation example">
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Docs</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="#">Breadcrumb</a></li>
  </ul>
</nav>

The .active class on the .breadcrumb-item indicates the current page. The <a> element inside the active breadcrumb item will be automatically disabled.

Alignment #

Breadcrumb elements can be aligned alternatively using utility classes. For example:

  • The .text-center class aligns the breadcrumb to the center.
  • The .text-right class aligns the breadcrumb to the right.
<!-- Aligned to center -->
<nav aria-label="...">
  <ul class="breadcrumb text-center">
    ...
  </ul>
</nav>
<!-- Aligned to right -->
<nav aria-label="...">
  <ul class="breadcrumb text-right">
    ...
  </ul>
</nav>

Sizing #

Since breadcrumbs contain only text content, they can be sized alternatively using utility classes for font sizes, such as .font-size-16, which sets the font size to 16px. By default, the font size is 14px.

<!-- Breadcrumb sized alternatively using a font size utility class -->
<nav aria-label="...">
  <ul class="breadcrumb font-size-16">
    ...
  </ul>
</nav>
On this page
Breadcrumb Alignment Sizing

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.