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>