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
foundation_navigation.htm
Advertisements