Foundation 6: The New Menu Component

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.

[author_more]

Navigation Menu Streamlining

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:

[code language="html"]
<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>
[/code]

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.

[code language="html"]
<!-- 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>
[/code]

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.

[code language="html"]
<!-- 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>
[/code]

Sub Menus and Nesting

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:

Continue reading %Foundation 6: The New Menu Component%

by Simon Codrington via SitePoint