Login Register

Kayzen

Breadcrumb

assets/modules/objects/breadcrumb

Files

  • _breadcrumb.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/breadcrumb

Module Overview

  • Name: breadcrumb
  • Modifiers: null
  • Components: null

Examples

<nav class="breadcrumb">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="further-page.html">Further Page</a></li>
    </ul>
</nav>

Customizing

The breadcrumb can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
font-size 0.9em The breadcrumb font size.
divider-icon "\f105" The code for any FontAwesome icon to act as the crumb separator.
icon-color base('text-color') The color of the divider icon.

To change one of the above values, pass your new value(s) to the breadcrumb() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include breadcrumb((
    'divider-icon' : "\f138",
    'icon-color'   : rgba(black, 0.25)
));