Foundation 6: The New Menu Component

Share this article

If you’ve used Foundation before you might have found the menu / navigation components a bit tedious to use. If you wanted to build an icon bar or horizontal sidebar navigation menu, you would need to use those components exactly as they are (and customise them to suit your needs if you wanted anything else).

With the release of Foundation 6, all of that has changed. In one of their biggest overhauls to date, Zurb have managed to simplify the process so you can power along with your development.

In a previous post, I discussed many of the new features in Foundation 6. In this post, I’ll cover navigation menus. You’ll see that the Zurb team now offers a pared-back build, along with several really useful JavaScript plugins to make the menu system better than ever.

Foundation 6 Menus

Navigation components have gone under a serious reconstruction in Foundation 6. In Foundation 5 you had a large range of menus to choose from, each of which required its own specific markup, settings, and styles to work correctly.

With the latest version, Zurb has re-worked these different menus into one large menu with multiple configuration options. So the following menus are now gone:

  • Inline List – Used to create the standard horizontal menu you’re used to
  • Side Nav – Used to outline a vertical menu, normally used in sidebars or other vertical locations
  • Icon Bar – Used to showcase menu items along with icons (or sometimes just icons).
  • Sub Nav – Used to create sub-navigation elements, such as links to different parts of a single page.

These have been replaced with a single component called Menu.

The menu is straight-forward. You define your markup with your a and li items inside your ul element with the menu class:

<ul class="menu">
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>

This new menu component offers the same basic functionality as the previous menus in Foundation 5, but has them as options so you can choose if your menu is to be a vertical menu, horizontal menu, icon bar, etc.

Simple Menu

By default, the menu class adds padding, subtle colours, and other layout aspects to help get you started. If you prefer to style everything yourself, you can add the .simple class to your menu and it will strip out most of the styling.

<!-- A basic menu with most styling stripped out -->
<ul class="menu simple">
  <li><a href="#">Vanilla</a></li>
  <li><a href="#">Strawberry</a></li>
  <li><a href="#">Chocolate</a></li>

Horizontal and Vertical Menus

Menus will be horizontal by default, which will work much like the older ‘inline menu’ from Foundation 5. If you want to have a vertical menu instead, it’s as easy as adding the vertical class to the menu. We could use this feature to create, for example, a listing of our latest news items.

<!-- Basic vertical menu example for showcasing blog items -->
<ul class="menu vertical">
  <li><a href="#">Dynamic Interactivity, 21st December 2015</a></li>
  <li><a href="#">Web Fundamentals, 12th December 2015</a></li>
  <li><a href="#">Intro to CSS, 02nd December 2015</a></li>

If you’re going to have sub-menus, you will most likely end up using one of the menu plugins such as the dropdown/drilldown components, however you can easily make a sub-menu offset to the left for use in a vertical menu by adding the nested class:

<!-- using the nested class to create
     a sub-menu inside a vertical menu -->
<ul class="menu vertical">
 <li><a href="#">Course One</a>
   <ul class="menu vertical nested">
     <li><a href="#">Course One - One</a></li>
     <li><a href="#">Course One - Two</a></li>
 <li><a href="#">Course Two</a></li>

Icon Menus

Icon menus work really well in app-centric designs and can be implemented easily with minimal styling.

To a standard menu, you add your icon image inside a <span> tag and wrap that inside your <a> tag. You can use either an image for your icon or optionally one of the Foundation Icon Font elements.

If you opt for the icon font you need to include it manually in your project and instead of using a span you can use an <i> element with the appropriate classes.

<!-- Simple icon menu using Foundation's icon font -->
<ul class="menu">
  <li><a href="#"><i class="fi-save"></i> <span>Save</span></a></li>
  <li><a href="#"><i class="fi-x"></i> <span>Delete</span></a></li>
  <li><a href="#"><i class="fi-arrow-left"></i> <span>Back</span></a></li>
  <li><a href="#"><i class="fi-arrow-right"></i> <span>Forward</span></a></li>

All we need to do is add the correct class name to the <i> element and we are good to go!

By default, the standard layout is a horizontal menu with icons to the left of each option. If you wanted the icon above the menu elements we can add the .icon-top class. This looks much more like what you see on mobile platforms with a little icon above and text below.

The standard menu is great but sometimes you need something more robust that handles sub-child elements and interactivity dynamically. Foundation 6 expands upon the previous versions of the Dropdown, Drilldown, and Accordion menus. These menus are all accessible via keyboard navigation and use semantic markup to make your development easier.

Because these menus use the JavaScript library, you need to set it up by doing the following:

  • You can either call $(document).foundation() to set it up if your build has it included, or
  • Include your specific menu and create it. For example to set up a drilldown menu you would define var elem = new Foundation.Drilldown(element) (after including the required dependencies).

The Dropdown menu should be really familiar to you. It’s the standard menu design where child elements are displayed when their parents are interacted with (via hovering or keyboard). Adding the data-dropdown-menu attribute to the menu will trigger all of this dynamically.

The Drilldown menu is unique in that instead of showing you a new menu on top of, or below, the current menu, it slides a new menu across the current menu, letting you ‘drill down’ X levels until you find the link you’re after. This is really useful in a situation when you have limited screen space such as on mobile.

The JavaScript handles the generation of the back button and positioning. All you need to do is include the data-drilldown attribute to all of the menu’s elements inside your menu.

The Accordion menu is exactly what it sounds like, an accordion menu that you can click to toggle (show/hide) sub-menus by clicking on a parent item. Include the data-accordion-menu attribute to the top level menu to get it to work.

All of the menu plugins have their own functions, events, and options that you can configure. For example if you wanted to trigger some functionality when you close a sub-menu inside the Accordion menu you could hook onto the up.zf.accordion menu event. For example:

// do something when the accordion closes
$('.my-accordion-menu').on('up.zf.accordion menu', function() {
  alert('Menu Closed');

Overall the functions, events, and options for these have all been streamlined in Foundation 6 so if you implemented these using Foundation 5 you might want to check how it’s all changed.

Responsive Navigation

This feature is new to Foundation 6. Previously if you wanted to display different menu styles on different device profiles, you would define multiple menus and show/hide them. With this latest version, you can create a single responsive menu that will dynamically change depending on what breakpoint/device profile is being used.

We start by defining our menu as we normally do:

<ul class="menu">
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>

To make the menu responsive, use the data-responsive-menu attribute and provide the following:

  • The default menu type (for example it could be the drilldown, dropdown or accordion menu)
  • Additional menu types prefixed with the size of the screen profile. For example small-dropdown, medium-drilldown, large-dropdown, etc.

Supplying this info will let our menu transform depending on what values we passed. This is useful if you want to have a standard dropdown menu on larger devices but then fall back to a vertical accordion/drilldown menu on small devices.

If you customised your breakpoint classes, you can optionally define even more menu combinations (for example showing the dropdown menu on extra large screens but falling back to drilldown menus when on large and below).

Top Bar

Let’s not forget the Top Barcomponent. This, like most of the other components, has been overhauled.

With the Top Bar component, your main menu can have both a left and right section. You might want to put your main menu items to the left and then your search and action buttons to the right. The basic format is as follows:

<div class="top-bar" id="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu">
      <li><a href="#">Monday</a></li>
      <li><a href="#">Tuesday</a></li>
      <li><a href="#">Wednesday</a></li>
      <li><a href="#">Thursday</a></li>
      <li><a href="#">Friday</a></li>
  <div class="top-bar-right">
    <ul class="dropdown vertical medium-horizontal menu">
      <li><a href="#">January</a></li>
      <li><a href="#">February</a></li>
      <li><a href="#">March</a></li>
      <li><input type="search" placeholder="Search"></li>

You can put whatever you want into this menu, however you will need to format it and fiddle around until it works for you (for example it makes sense to make the inner menus ‘dropdown’ and ‘vertical’ so that they work well on mobile).

If you also want to have a menu toggle (which was part of the component in Foundation 5), you can use the responsive toggle functionality.

The basic run-down of this is that it will display a menu toggle on small devices that will show / hide your menu. The documentation has more information but its default settings will work fine for most cases.

<div class="title-bar" data-responsive-toggle="top-bar"
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Main Menu</div>

What’s important here is the data-responsive-toggle attribute, which needs to match the id of the menu you want to control (which is why this one says top-bar). This will display a button that will toggle the menu only when viewing the small profile.

Below is a CodePen example that showcases some of the different ways you can use the new menu component. The menu documentation is the best source if you’re looking to see how you can adjust the menu’s default settings and options.

See the Pen Foundation 6 Menu Examples by SitePoint (@SitePoint) on CodePen.

A huge reduction in code

There are two benefits to the streamlining of the menu components in Foundation 6, the first being the reduction in complexity (as now everything is a menu with just different options); the second more subtle benefit is that it’s significantly reduced the size of the framework.

The updated menu component has merged 5+ menu structures together and in doing so has removed all of the legacy CSS that used to be included in the framework. Even though it’s somewhat glossed over on Zurb’s blog, they have removed more than 1000 lines of styling by merging these all together.

Reduction in code is always a good thing for developers. The framework weighs less and loads faster, it’s easier to learn and understand, and it will be easier to update going forward.


Foundation 6 has really trimmed back and in the process improved a vast majority of their components. Before you would need to use a series of different components to get the menus you need, now it’s just one highly flexible component.

The combination of the different menu plugins with the revised menu build has created a powerful, yet simple component that you should be using in all your Foundation projects.

Frequently Asked Questions about Foundation 6 Menu Component

How do I customize the Foundation 6 Menu Component?

Customizing the Foundation 6 Menu Component is quite straightforward. You can modify the CSS classes and attributes to suit your design needs. For instance, you can change the background color, font size, or even the layout of the menu. You can also use the Foundation’s built-in classes for responsiveness and alignment. Remember to always test your changes to ensure they work as expected across different devices and browsers.

Can I use Foundation 6 Menu Component for a mobile responsive design?

Absolutely! Foundation 6 is built with mobile-first in mind. It includes a responsive navigation menu that automatically switches to a mobile-friendly version on smaller screens. You can customize this feature by adjusting the breakpoint at which the switch occurs. This ensures your website remains user-friendly and accessible on all devices.

How do I add a dropdown menu in Foundation 6?

Adding a dropdown menu in Foundation 6 involves using the Dropdown Menu component. You’ll need to include the ‘is-dropdown-submenu-parent’ class to the list item that will contain the dropdown menu. Then, create a nested unordered list with the class ‘menu’ for the dropdown items. Remember to include the appropriate ARIA roles for accessibility.

What is the Accordion Menu in Foundation 6 and how do I use it?

The Accordion Menu in Foundation 6 is a vertical menu with collapsible submenus. It’s perfect for instances where you want to save space or have multiple levels of navigation. To use it, you’ll need to include the ‘accordion-menu’ class in your unordered list and use the ‘is-accordion-submenu-parent’ and ‘is-accordion-submenu-item’ classes for the parent and child items respectively.

How do I make my Foundation 6 Menu Component sticky?

To make your Foundation 6 Menu Component sticky, you can use the Sticky plugin provided by Foundation. This plugin allows you to make an element remain in view while scrolling. You’ll need to include the ‘sticky’ class and the ‘data-sticky’ attribute in your menu’s markup. You can also specify an offset to determine how far the element should be from the top of the viewport when scrolling.

How do I add icons to my Foundation 6 Menu Component?

Adding icons to your Foundation 6 Menu Component can be done using the Foundation Icon Fonts. You’ll need to include the appropriate classes for the icon you want to use in an ‘i’ or ‘span’ element within your menu item. You can also use other icon libraries like Font Awesome or Ionicons, but you’ll need to include their respective CSS files in your project.

Can I use Foundation 6 Menu Component with a CMS like WordPress?

Yes, you can use Foundation 6 Menu Component with a CMS like WordPress. You’ll need to integrate the Foundation framework into your WordPress theme and then use the appropriate classes and markup in your theme’s menu locations. This might require some knowledge of PHP and WordPress theme development.

How do I add a search bar to my Foundation 6 Menu Component?

Adding a search bar to your Foundation 6 Menu Component involves using the Form component. You’ll need to create a form with an input field and a submit button, and then include it in your menu. You can style the search bar using Foundation’s grid classes to ensure it fits well within your menu.

How do I make my Foundation 6 Menu Component accessible?

Foundation 6 provides several features to make your Menu Component accessible. These include ARIA roles and attributes, keyboard accessibility, and clear focus states. You should also ensure your menu has a proper contrast ratio and is readable by screen readers. Always test your menu with different accessibility tools to ensure it meets the necessary standards.

How do I troubleshoot issues with my Foundation 6 Menu Component?

Troubleshooting issues with your Foundation 6 Menu Component involves checking for common problems like incorrect markup, missing classes, or CSS conflicts. You can use your browser’s developer tools to inspect your menu and see if there are any errors. If you’re still having trouble, you can refer to the Foundation documentation or seek help from the Foundation community.

Simon CodringtonSimon Codrington
View Author

Full stack developer and overall web enthusiast. I love everything to do with web / design and my passion revolves around creating awesome websites. Focusing primarily on WordPress, I create themes, plugins and bespoke solutions.

foundation 6LouisLNavigationnavigation menu
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form