Choosing the right menu for your site is challenging - there’s a lot of decisions to make! Do you want to lay things out vertically or horizontally? Should you use dropdowns, accordions, or drilldowns? And then what happens if your desired behavior is different on a small screen than a large? Luckily, Foundation has your back!

Today we’re going to look at how Foundation’s Responsive Navigation plugin lets you write a menu once and display it any number of different ways depending on media query.

An Intro into Foundation's Responsive Menus

Let’s take a look at a simple dropdown menu. First off, let’s talk a little bit about the types of menus already built in for you in Foundation.

The code looks like this:

[See Codepen Example]

Drilldown

Drilldown menus are similar, creating a UI pattern popularized by iOS, where tapping or clicking on a menu item causes the submenu to slide over the top:

The code looks like this:

[See Codepen Example]

Switching it up for each breakpoint

This is all well and good, but what happens when we want to use different UI patterns for mobile than for desktop? For example, what if we want to use a drilldown for small screens, and dropdowns for the medium breakpoint and up? Not to worry, all of the menu patterns in Foundation actually fit together using the same markup, and using the Responsive Menu plugin you can swap between them based on breakpoint! It’s as simple as changing your data-drilldown-menu or data-dropdown-menu to a data-responsive-menu attribute and specifying breakpoints:

[See Codepen Example]

Voila! With a single changed data attribute you have gone from a single menu pattern to one that is responsive to each screen size. Amazing!

An Intro into Foundation's Responsive Menus

You’re not limited to 2 different menu types - you can add as many breakpoints as you’d like! We wouldn’t recommend going too crazy with this, but just as a quick example, imagine you want to still use a drilldown for small, and dropdowns for large, but want to switch to an accordion menu for tablets? Once again it is as simple as specifying your breakpoints in the responsive-menu data attribute:

[See Codepen Example]

Getting Fancy With It

What if you want to do more than just change the form of your menu for smaller devices, but you also want to hide it away behind something like a hamburger icon to save space? This is where the paired “Responsive Toggle” plugin from Foundation comes into play. Simply put, the responsive toggle lets you do exactly that - create something like that hamburger icon that only shows on particular screen sizes, and that deliberately hides and shows a menu on those screen sizes. It’s easier to show than explain, so check out this demo that extends our previous example: Mobile Menu Example

As you scale from large to medium, a title bar with a hamburger menu shows up and the menu hides… clicking or tapping on the hamburger menu shows.

---