You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# 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!

Bulma Newsletter

Get notified when v1 is ready!