Breadcrumbs

+++ date = "2017-04-10T16:41:54+01:00" weight = 110 description = "Traces for the users so they won't get lost" title = "Breadcrumbs" draft = false bref= "Breadcrumbs in Kube are formed as lists with default separator. This separator can be customized with ease by simply changing a single CSS line" toc = true +++

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>