Foundation - Menu SASS Reference
Variables
You can change the styles of the components by using the following SASS variables as listed in the table.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$menu-margin Sets margin in menu. |
Number | 0 |
| 2 |
$menu-margin-nested Sets margin for left side in a nested menu. |
Number | 1rem |
| 3 |
$menu-item-padding 0.7rem 1rem |
Number | Sets padding in the menu. |
| 4 |
$menu-icon-spacing Sets space between the text and icon in the menu item. |
Number | 0.25rem |
| 5 |
$menu-expand-max Includes maximum number of expand-n classes in the CSS. |
Number | 6 |
Mixins
You can use the mixins to build the CSS class structure for your components as listed in the table.
menu-base
Base style is created for menu.
@include menu-base;
menu-expand
Expand the menu item at the same width.
@include menu-expand($count);
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$count Number of items inside the menu. |
Keyword or Number | auto |
menu-direction
Menu direction is set.
@include menu-direction($dir);
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$dir Sets menu direction horizontally or vertically. |
Keyword | horizontal |
menu-simple
Simple menu is created without padding or hover state.
@include menu-simple;
menu-nested
Styles are included for the nested menu. Include margin-left to the menu.
@include menu-nested($padding);
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$padding Sets the margin length. |
Keyword or Number | auto |
menu-icons
Icons are included to menu item.
@include menu-icons($position, $base);
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$position Set position for the icons. |
Keyword | side |
| 2 |
$base To call mixin multiple times on same element then set it as false. |
Boolean | true |