title: Menu description: Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup. video: 'CmMGPCd-fYc' sass: scss/components/_menu.scss tags:

navigation
side nav
sub nav
icon bar
top bar flex: true

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.

Watch this part in video

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

Watch this part in video

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

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

Foundation Laravel Package