Breadcrumbs

Breadcrumbs in Kube are formed as lists with default separator. This separator can be customized with ease by simply changing a single CSS line.

Base

<nav class=“breadcrumbs”>
    <ul>
        <li><a href=””>…</a></li>
        <li><span>…</span></li>
    </ul>
</nav>

Centered

<nav class=“breadcrumbs push-center”>
    <ul>
        <li><a href=””>…</a></li>
        <li class=“active”><a href=””>…</a></li>
    </ul>
</nav>

Custom Separator

// css
#breadcrumbs-custom-separator li:after {
    content: ‘>‘;
}

// html
<nav id=“breadcrumbs-custom-separator” class=“breadcrumbs”>
    <ul>
        <li><a href=“”>…</a></li>
        <li><span>…</span></li>
    </ul>
</nav>