Loading

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>