Foundation
Jump to Nav

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 a wrapping element with the class .menu-centered.

If you're using Flexbox mode, you don't need the wrapper class. Instead, you can just add the class .align-center to the menu.

<div class="menu-centered">
  <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>
</div>


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="menu vertical">
  <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 .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="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 .icon-top to the Menu to orient icons above the text.

<ul class="menu 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>

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.

NameTypeDefault ValueDescription
$menu-margin Number 0

Margin of a menu.

$menu-margin-nested Number 1rem

Left-hand margin of a nested menu.

$menu-item-padding Number 0.7rem 1rem

Padding for items in a menu.

$menu-item-color-active Color $white

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-item-background-hover Color $light-gray

Background color for an hovered menu item.

$menu-border Color $light-gray

Color for bordered menu


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.

@include menu-base;

Creates the base styles for a Menu.


@include menu-expand;

Expands the items of a Menu, so each item is the same width.


@include menu-direction($dir);

Sets the direction of a Menu.

ParameterTypeDefault ValueDescription
$dir Keyword horizontal

Direction of the Menu. Can be horizontal or vertical.


@include menu-simple;

Creates a simple Menu, which has no padding or hover state.


@include menu-nested($padding);

Adds styles for a nested Menu, by adding margin-left to the menu.

ParameterTypeDefault ValueDescription
$padding Keyword or Number auto

Length of the margin.


@include menu-icons($position, $base);

Adds support for icons to Menu items.

ParameterTypeDefault ValueDescription
$position Keyword side

Positioning for icons. Can be side (left, or right on RTL) or top.

$base Boolean true

Set to false to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to false if you're calling the mixin multiple times on the same element.