HTML & CSS

Foundation 6: The New Menu Component

Simon Codrington
Share

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

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

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

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>
   </ul>
 </li>
 <li><a href="#">Course Two</a></li>
</ul>

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

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

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>
    </ul>
  </div>
  <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>
    </ul>
  </div>
</div>

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"
     data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Main Menu</div>
</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.

Conclusion

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.