Breadcrumb

The best way to display the navigation path on a website is a breadcrumb. These are ready-to-use navigation elements with some different look and customization.

Base #

<nav class="breadcrumb">
    <a href="">...</a>
    <span>...</span>
</nav>

Custom Separator #

Do you need a custom separator between the breadcrumb pieces? Write a small CSS code with a modifier.

// css
.is-custom-separator a:after,
.is-custom-separator span:after {
    content: '>';
}

// html
<nav class="breadcrumb is-custom-separator">
    <a href="">...</a>
    <span>...</span>
</nav>