Breadcrumb - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-breadcrumb">
    <a class="item">Movie</a>
    <a class="item">Awards</a>
    <a class="item is-active">Koe no Katachi</a>
</div>

States

Active

A breadcrumb item can be active.

<div class="ts-breadcrumb">
    <a class="item">
        <span class="ts-icon is-house-icon"></span>
    </a>
    <a class="item">
        <span class="ts-icon is-users-icon is-end-spaced"></span>Users
    </a>
    <a class="item is-active">
        Management
    </a>
</div>

Variations

Customized

An item divider can be formatted as a custom icon.

<div class="ts-breadcrumb is-customized">
    <a class="item">Website</a>
    <div class="divider">
        <span class="ts-icon is-caret-right-icon"></span>
    </div>
    <a class="item">Registration</a>
    <div class="divider">
        <span class="ts-icon is-caret-right-icon"></span>
    </div>
    <a class="item">Profile</a>
</div>

Chevroned

A breadcrumb can have chevron separators.

<div class="ts-breadcrumb is-chevroned">
    <a class="item">Online Shopping</a>
    <a class="item">24H Delivery</a>
    <a class="item">Smartphones</a>
</div>

Hyphenated

A breadcrumb can have hyphen separators.

<div class="ts-breadcrumb is-hyphenated">
    <a class="item">Wireless Mouse</a>
    <a class="item">High Polling Rate</a>
    <a class="item">On-Sale</a>
</div>

Stepped

A breadcrumb can be stepped, any item that wasn't active will be dimmed.

<div class="ts-breadcrumb is-chevroned is-stepped">
    <a class="item">Contact Us</a>
    <a class="item">Issues</a>
    <a class="item is-active">Form</a>
</div>

Sizes

A breadcrumb can vary in size.

<div class="ts-breadcrumb is-small">
    <a class="item">Docs</a>
    <a class="item">Programming</a>
    <a class="item">Golang</a>
</div>
<div class="ts-breadcrumb">
    <a class="item">Docs</a>
    <a class="item">Programming</a>
    <a class="item">Golang</a>
</div>
<div class="ts-breadcrumb is-large">
    <a class="item">Docs</a>
    <a class="item">Programming</a>
    <a class="item">Golang</a>
</div>

Compositions

Block Section

Combine with Box to create a block section for breadcrumb.

<div class="ts-box">
    <div class="ts-content is-secondary">
        <div class="ts-breadcrumb is-chevroned">
            <a class="item">Movie</a>
            <a class="item">Sci-Fi</a>
            <a class="item">Interstellar</a>
        </div>
    </div>
</div>