--- title: Breadcrumb layout: docs theme: library doc-tab: components doc-subtab: breadcrumb breadcrumb: - home - documentation - components - components-breadcrumb meta: 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 Bulma breadcrumb is a simple navigation component that 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 docs/elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %} {% include docs/elements/anchor.html name="Alignment" %}

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

{% include docs/elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} {% include docs/elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} {% include docs/elements/anchor.html name="Icons" %}

You can use any of the Font Awesome icons.

{% include docs/elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} {% include docs/elements/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 docs/elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} {% include docs/elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} {% include docs/elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} {% include docs/elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% include docs/elements/anchor.html name="Sizes" %}

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

{% include docs/elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} {% include docs/elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} {% include docs/elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}