Login Register

Kayzen

Side Nav

assets/modules/objects/side-nav

Files

  • _side-nav.scss
  • README.md

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

Module Overview

The side-nav module is used when the header module has the side option set, and is also used for the flyout-nav module.

  • Name: side-nav
  • Modifiers: null
  • Components: openClose

Examples

<div class="side-nav">
    <nav>
        <ul>
            <li><a href="../../../link">Link 1</a></li>
            ...
        </ul>
    </nav>
</div>

Customizing

The Side-Nav module 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.
width 300px The width for the side navigation.
background color('greyscale', 'grey-5') The main background of the side navigation.
font-size font-size('size-2') The base font size for the module.
transition base('transition') The transition time for the side navigation to slide in.
z-index 15 The z-index for the side-nav module.
parent-color color('greyscale', 'white') The text color for top level menu items.
parent-background rgba(black, 0.15) This background for top level menu items.
parent-left-border 5px solid color('brand', 'primary') The left border for the top level menu items.
parent-hover-background color('brand', 'primary') This hovered background for top level menu items.
item-padding 1.2em The padding for menu items.
item-color color('greyscale', 'grey-3') This text color for menu items.
item-bg transparent This background for menu items.
item-top-border 1px solid rgba(white, 0.05) This top border for menu items.
item-bottom-border 1px solid rgba(black), 0.1) This bottom border for menu items.
item-left-border 5px solid rgba(black, 0.3) The left border for menu items.
item-right-border none The right border for menu items.
item-hover-left-border 5px solid color('brand', 'primary') This left border for menu items when hovered.
collapside:enabled true If enabled, child menus will be collapsible.
collapsible:open-by-default true If enabled collapsible items will be open by default.
collapsible:icon 'fa-chevron-circle-down The Font Awesome icon name for the open/close icon.

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

@include side-nav((
    'width'       : 400px,
    'background'  : white,
    'collapsible' : (
        'enabled' : false
    )
));