A dropdown menu is any child menu of the main navigation module. No special markup is required and they are infinitely nestable.
dropdown
The dropdown can be customized using the following options:
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).