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 have the option of either using `.align-center` to the menu like this codepen or instead you can use the default wrapper class below.

    <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>

## 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-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.

#### 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-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 `horizontal` or `vertical`.

#### menu-simple

    @include menu-simple($dir);

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

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$dir` | Keyword | `$global-left` | Direction of the menu. Set to `null` to do not generate styles for direction.

#### menu-simple-direction

    @include menu-simple-direction($dir);

Direction modifier for a simple Menu

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$dir` | Keyword | `$global-left` | Direction of the menu

#### menu-nested

    @include menu-nested($padding);

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

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$padding` | Keyword or Number | `auto` | Length of the margin.

#### menu-icons

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

Adds support for icons to Menu items.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$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.