Login Register

Kayzen

Dropdown

assets/modules/objects/dropdown

Files

  • _dropdown.scss
  • README.md

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

Module Overview

This module is dependent on the Navigation module.

A dropdown menu is any child menu of the main navigation module. No special markup is required and they are infinitely nestable.

  • Name: dropdown
  • Modifiers: null
  • Components: null

Examples

<div class="navigation">
    <ul>
        <li>
            <a>First Level Item</a>
            <!-- This is where the dropdown menu begins -->
            <ul>
                <li>
                    <a>2nd Level Item</a>
                    <ul>
                        <li>
                            <a>3rd Level Item</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

To see a live example, checkout the navigation on this page you're currently on.

Customizing

The dropdown can be customized using the following options:

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

Property Name Default Value Description
text-align left The text alignment for dropdown menus.
width 175px The minimum with which dropdown menus should be.
top-position 0 The top distance dropdown menus should be from their parent.
dropdown-icon "\f105" The Font Awesome icon which shows if a menu item has a child menu.
low-level-icon "\f105" The Font Awesome icon for dropdown menu items which have a child menu.
font-size font-size('size-2', true) the font size for dropdown menus.
link-color color('greyscale', 'grey-4') The color for dropdown menu links.
link-bg-color color('greyscale', 'grey-1') The background color for dropdown links.
link-padding 0.6rem The padding for dropdown menu items.
link-hover-color color('greyscale', 'white') The text color for dropdown menu items when hovered.
link-hover-bg-color color('brand', 'primary') The background color for dropdown menu items when hovered.
link-active-color option($navigation, 'a-has-child-color') The text color for dropdown menu items when supplied with the active class.
link-active-bg-color option($navigation, 'a-has-child-color') The background color for dropdown menu items when supplied with the active class.

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

@include dropdown((
    'width'         : 150px,
    'font-size'    : 12px,
    'link-padding' : 6px 10px
));