• _navigation.scss
  • README.md

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

Module Overview

The Navigation module appears inside the Header ('app-header') module by default, along with the Logo module.

  • Name: navigation
  • Modifiers: noIcons
  • Components: null

The Navigation module makes use of the following other modules, which will not be covered in this section:


<nav class="navigation">
        <li><a>Link 1</a></li>
        <li><a>Link 2</a></li>
        <li><a>Link 3</a></li>

No Icons

<nav class="navigation-noIcons">
        <li><a>Link 1</a></li>
        <li><a>Link 2</a></li>
        <li><a>Link 3</a></li>

Alternatively, you can set the no-icons option in the config (see below).


The Navigation can be customized using the following options:

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

Property Name Default Value Description
output-JSON true This allows the config to be accessed in the JavaScript.
text-align right This is the text alignment of the navigation module.
font-size 1em This id the module's font-size.
dropdown-icon "\f107" This is the font awesome icon to be used for items that have child menus.
item-gutter 0.5em The spacing between each top level menu item.
item-padding 0.5rem 0.75rem The navigation item padding.
item-color color('greyscale', 'white') This navigation item text color.
item-bg transparent This background color for navigation items.
item-border 1px solid transparent This border for navigation items.
item-radius 0 This border radius for top level navigation items.
item-hover-bg transparent The background for hovered navigation items.
item-hover-border 1px solid color('greyscale', 'white') This border for hovered navigation items.
has-child-hover-color color('brand', 'primary') This color for navigation items with child menus when hovered.
has-child-hover-bg color('greyscale', 'grey-1') This background for navigation items with child menus when hovered.
has-child-hover-border 1px solid transparent This border for navigation items with child menus when hovered.
no-icons false If enabled, any navigation icons will not be shown.

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

@include navigation((
    'item-padding' : 1em,
    'no-icons'     : true