Breadcrumb

A simple breadcrumb component to improve your navigation experience

New! 0.4.3

The breadcrumb component only requires a .breadcrumb container and a ul list.

The dividers are automatically created in the content of the ::before pseudo-element of li tags.

You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.

<nav class="breadcrumb">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

Alignment

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

<nav class="breadcrumb is-centered">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

<nav class="breadcrumb is-right">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

Icons

You can use any of the Font Awesome icons.

<nav class="breadcrumb">
  <ul>
    <li><a><span class="icon is-small"><i class="fa fa-home"></i></span><span>Bulma</span></a></li>
    <li><a><span class="icon is-small"><i class="fa fa-book"></i></span><span>Documentation</span></a></li>
    <li><a><span class="icon is-small"><i class="fa fa-puzzle-piece"></i></span><span>Components</span></a></li>
    <li class="is-active"><a><span class="icon is-small"><i class="fa fa-thumbs-up"></i></span><span>Breadcrumb</span></a></li>
  </ul>
</nav>

Sizes

You can choose between 3 additional sizes: is-small is-medium and is-large.

<nav class="breadcrumb is-small">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

<nav class="breadcrumb is-medium">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

<nav class="breadcrumb is-large">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

Alternative separators

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

<nav class="breadcrumb has-arrow-separator">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

<nav class="breadcrumb has-bullet-separator">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

<nav class="breadcrumb has-dot-separator">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

<nav class="breadcrumb has-succeeds-separator">
  <ul>
    <li><a>Bulma</a></li>
    <li><a>Documentation</a></li>
    <li><a>Components</a></li>
    <li class="is-active"><a>Breadcrumb</a></li>
  </ul>
</nav>

Bulma Partners

Check out their products!