--- title: Breadcrumb subtitle: "A simple breadcrumb component to improve your navigation experience" layout: documentation doc-tab: components doc-subtab: breadcrumb breadcrumb: - home - documentation - components - components-breadcrumb meta: - since: "0.4.3" - variables: true - colors: false - sizes: true --- {% 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 %}

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 %} {% 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 %} {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} {% 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 %} {% 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 %} {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% 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 %} {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} {% include variables.html type='component' %}