Menu
Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup.
The menu is a flexible, all-purpose component for navigation. It replaces Foundation 5's inline list, side nav, sub nav, and icon bar, unifying them into one component.
Basic Menu
All versions of the menu are a <ul>
filled with <li>
elements containing links. By default, a Menu is horizontally oriented.
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Item Alignment
By default, each item in the menu aligns to the left. They can also be aligned to the right with the .align-right
class.
In a right-to-left environment, items align to the right by default, and the class .align-left
can be used to reverse direction.
<ul class="menu align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
To align items in the middle, add .align-center
to the .menu
class.
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Items can also be set to expand out and take up an even amount of space, with the .expanded
class. Thanks to the magic of CSS, the items will automatically size themselves equally depending on how many are inside the menu.
<ul class="menu expanded">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
Vertical Menu
Add the .vertical
class to a Menu to switch its orientation.
<ul class="vertical menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Add align-right
class for making the vertical menu aligned to the right.
<ul class="vertical menu align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Add align-center
class for making the vertical menu aligned to the center.
The above vertically left & right aligned menu are supported in all types of menu's.
But `align-center` for vertical menu’s is only available for basic menu and is not available for dropdown, accordion or a drilldown menu.
<ul class="vertical menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Simple Style
Add the .simple
class to a Menu to remove the padding and color change. This style imitates the inline list from Foundation 5.
<ul class="menu simple">
<li>One</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Nested Style
Add a new menu inside the <li>
of a Menu and add the class .nested
to create a nested menu. The nested Menu has extra padding on the inside.
<ul class="vertical menu">
<li>
<a href="#">One</a>
<ul class="nested vertical menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
Active State
Add the class .is-active
to any <li>
to create an active state. You could apply this server-side to mark the active page, or dynamically with JavaScript.
<ul class="menu">
<li class="is-active"><a>Home</a></li>
<li><a>About</a></li>
<li><a>Nachos</a></li>
</ul>
Text
Because the padding of the menu item is applied to the <a>
, if you try to add an item that's text only, it will be misaligned. To get around this, add the class .menu-text
to any <li>
that doesn't have a link inside of it.
<ul class="menu">
<li class="menu-text">Site Title</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
Icons
Menu items can have icons. Wrap the text of the item in a <span>
, and then add an <img>
element before the <span>
. If you're using the Foundation icon font, the <img>
will be an <i>
instead.
<ul class="menu">
<li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>
Add the class .icons
to the parent menu container to specify that the menu contains icons. Along with this, add your choice of layout class, such as .icon-top
.
When using any of the menu icon layout classes, ensure that the icon and the text are in the correct order. For .icon-right
and .icon-bottom
, the icon must come AFTER the text.
Icon Top
<ul class="menu icons icon-top">
<li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>
Icon Right
<ul class="menu icons icon-right">
<li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
<li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
<li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
<li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
</ul>
Icon Bottom
<ul class="menu icons icon-bottom">
<li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
<li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
<li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
<li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
</ul>
Icon Left
<ul class="menu icons icon-left">
<li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
<li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>
Icon Position with Nested Styles
Nested lists can have icons positioned differently based on the menu layer. Add the class .nested
to the nested list and your desired icon position: .icon-top
, .icon-right
, .icon-bottom
, .icon-left
.
<ul class="vertical menu icons icon-top">
<li>
<a href="#"><i class="fi-list"></i> One</a>
<ul class="nested vertical menu icons icon-left">
<li><a href="#"><i class="fi-list"></i> One</a></li>
<li><a href="#"><i class="fi-list"></i> Two</a></li>
</ul>
</li>
<li><a href="#"><i class="fi-list"></i> Two</a></li>
<li><a href="#"><i class="fi-list"></i> Three</a></li>
</ul>
Sticky Navigation
See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
Name | Type | Default Value | Description |
---|---|---|---|
$menu-margin |
Number | 0 |
Margin of a menu. |
$menu-nested-margin |
Number | $global-menu-nested-margin |
Left-hand margin of a nested menu. |
$menu-items-padding |
Number | $global-menu-padding |
Padding for items in a pill menu. |
$menu-simple-margin |
Number | 1rem |
margin for items in a simple menu. |
$menu-item-color-active |
Color | $white |
Text color of an active menu item. |
$menu-item-color-alt-active |
Color | $black |
Alternative text color of an active menu item.. |
$menu-item-background-active |
Color | get-color(primary) |
Background color of an active menu item. |
$menu-icon-spacing |
Number | 0.25rem |
Spacing between an icon and text in a menu item. |
$menu-state-back-compat |
Boolean | true |
Backward compatibility for menu state. If true, this duplicate |
$menu-centered-back-compat |
Boolean | true |
Backward compatibility for menu centered. If true, this duplicate |
$menu-icons-back-compat |
Boolean | true |
Backward compatibility for using |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
menu-base
@include menu-base;
Creates the base styles for a Menu.
menu-expand
@include menu-expand;
Expands the items of a Menu, so each item is the same width.
menu-align
@include menu-align;
Align menu items.
menu-direction
@include menu-direction($dir);
Sets the direction of a Menu.
Parameter | Type | Default Value | Description |
---|---|---|---|
$dir |
Keyword | horizontal |
Direction of the Menu. Can be |
menu-simple
@include menu-simple($dir, $margin);
Creates a simple Menu, which has no padding or hover state.
Parameter | Type | Default Value | Description |
---|---|---|---|
$dir |
Keyword | $global-left |
Direction of the menu. This effects the side of the |
$margin |
Number | $menu-simple-margin |
The margin to apply to each |
menu-nested
@include menu-nested($margin, $nested-alignment);
Adds styles for a nested Menu, by adding margin-left
to the menu.
Parameter | Type | Default Value | Description |
---|---|---|---|
$margin |
Keyword or Number | $menu-nested-margin |
Length of the margin. |
$nested-alignment |
Keyword | left |
Alignment of the nested class |
menu-icons
@include menu-icons;
Adds basic styles for icons in menus.
menu-icon-alignment
@include menu-icon-alignment($alignment);
Align top/bottom icons within a menu.
Parameter | Type | Default Value | Description |
---|---|---|---|
$alignment |
Keyword | center |
Alignment of the icon |
menu-icon-position
@include menu-icon-position;
Adds position classes for icons within a menu.