Files

• _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.

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

• Dropdown
• Mega-Menu

Examples

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

No Icons

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

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

Customizing

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
));