--- layout: documentation doc-tab: components doc-subtab: breadcrumb variables: - name: $breadcrumb-item-color value: $text-light - name: $breadcrumb-item-hover-color value: $link-hover - name: $breadcrumb-item-active-color value: $text-strong - name: $breadcrumb-item-separator-color value: $text --- {% include subnav-components.html %} {% capture breadcrumb_example %} {% endcapture %} {% capture breadcrumb_centered_example %} {% endcapture %} {% capture breadcrumb_right_example %} {% endcapture %} {% capture breadcrumb_icons_example %} {% endcapture %} {% capture breadcrumb_small_example %} {% endcapture %} {% capture breadcrumb_medium_example %} {% endcapture %} {% capture breadcrumb_large_example %} {% endcapture %} {% capture breadcrumb_arrow_example %} {% endcapture %} {% capture breadcrumb_bullet_example %} {% endcapture %} {% capture breadcrumb_dot_example %} {% endcapture %} {% capture breadcrumb_succeeds_example %} {% endcapture %}

Breadcrumb

A simple breadcrumb component to improve your navigation experience

{% include meta.html since="0.4.3" variables=true colors=false sizes=true %}

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.


{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_example}}{% endhighlight %} {% include anchor.html name="Alignment" %}

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

{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %} {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_right_example}}{% endhighlight %} {% include anchor.html name="Icons" %}

You can use any of the Font Awesome icons.

{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_icons_example}}{% endhighlight %} {% include anchor.html name="Alternative separators" %}

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

{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %} {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %} {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %} {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %} {% include anchor.html name="Sizes" %}

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

{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %} {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %} {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %} {% include variables.html %}