Breadcrumb

A simple breadcrumb component to improve your navigation experience

The 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.

<nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

Alignments

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

<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

<nav class="breadcrumb is-right" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

Icons

<nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
        <li>
            <a href="#">
                <span class="icon is-small">
                    <i class="fas fa-home" aria-hidden="true"/>
                </span>
                <span>Bulma</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="icon is-small">
                    <i class="fas fa-book" aria-hidden="true"/>
                </span>
                <span>Documentation</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="icon is-small">
                    <i class="fas fa-puzzle-piece" aria-hidden="true"/>
                </span>
                <span>Components</span>
            </a>
        </li>
        <li class="is-active">
            <a href="#">
                <span class="icon is-small">
                    <i class="fas fa-thumbs-up" aria-hidden="true"/>
                </span>
                <span>Breadcrumb</span>
            </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" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

Sizes

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

<nav class="breadcrumb is-small" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

<nav class="breadcrumb is-large" aria-label="breadcrumbs">
    <ul>
        <li><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
    </ul>
</nav>

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$breadcrumb-item-color`	color	`$link`
`$breadcrumb-item-hover-color`	color	`$link-hover`
`$breadcrumb-item-active-color`	color	`$text-strong`
`$breadcrumb-item-padding-vertical`	string	`0`
`$breadcrumb-item-padding-horizontal`	size	`0.75em`
`$breadcrumb-item-separator-color`	color	`$border-hover`