Responsive Navigation

JavaScript

Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes.

The Menu has some responsive CSS classes built in, which allow you to re-orient a menu on different screen sizes.

Watch this part in video

<ul class="vertical medium-horizontal menu">
  <li><a href="#0"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#0"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#0"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#0"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

The Menu can be augmented with one of three different plugins—dropdown menu, drilldown menu, or accordion menu. However, these patterns tend to work best on specific screen sizes.

With our responsive Menu plugin, you can apply a default pattern to a Menu, and then change that pattern on other screen sizes.

Some Menu Combination (but not limited) to are

Drilldown Dropdown Menu
Accordion Dropdown Menu
Drilldown Accordion Menu

A drilldown menu works well on mobile, but on larger screens, you may want to convert that same menu into a dropdown. Here's an example that does just that:

Watch this part in video

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Bug(v6.3.1): There is a bug within drilldown-dropdown menu combo. If you set up a responsive menu with drilldown on small, then dropdown for medium up, and resize to small and then back to medium the dropdowns will not work. The bug can be reproduced here
Good News: The Bug will be fixed with the upcoming foundation release. If you are specifically using v6.3.1, we recommend to use this below patch to fix this.

// Patch for a Bug in v6.3.1
$(window).on('changed.zf.mediaquery', function() {
  $('.is-dropdown-submenu.invisible').removeClass('invisible');
});

Same like drilldowns, an accordion menu works well on mobile, but on larger screens, you may want to convert that same menu into a dropdown. Here's an example for the same:

<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Just like foundation docs itself (see left sidenav), an accordion menu is great for a sidenav of a website on desktop, but for mobile, You might need Drilldown menu.

<ul class="vertical menu" data-responsive-menu="drilldown medium-accordion" style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Responsive Toggle

In Foundation 5, the top bar combined this menu toggling concept into one plugin. We now have a separate, optional component you can use in tandem with the responsive plugin. It's called the title bar, and it allows you to quickly setup a menu toggle on mobile. The title bar hides itself on larger screens.

To set it up, first give your menu a unique ID. (You don't even need to use Menu! Any element will work.) Next, add a title bar with the class .title-bar and the attribute data-responsive-toggle. The value of data-responsive-toggle should be the ID of the menu you're toggling. Lastly, add data-toggle to the element that will trigger the toggle. The value of data-toggle should also be the ID of the menu you're toggling.

By default, the title bar will be visible on small screens, and the Menu hides. At the medium breakpoint, the title bar disappears, and the menu is always visible. This breakpoint can be changed with the data-hide-for attribute in HTML, or the hideFor setting in JavaScript.

Watch this part in video

Scale your browser down to see the toggle happen.

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Responsive Toggle with animation

To use animations from the Motion UI library, include the data-animate="someAnimationIn someAnimationOut" attribute.

Scale your browser down to see the toggle happen.

<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-animated-menu" data-animate="hinge-in-from-top spin-out">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

Preventing FOUC

Before the JavaScript on your page loads, you'll be able to see both the mobile and desktop element at once for a brief second. This is known as a flash of unstyled content. There's not an easy way for the framework to handle this for you, but you can add some extra CSS to account for it.

If we reference the above example, .title-bar is our mobile element and .top-bar is our desktop element. So before the JavaScript loads, we want only the right element for that screen size to be visible.

.no-js .top-bar {
  display: none;
}

@media screen and (min-width: 40em) {
  .no-js .top-bar {
    display: block;
  }

  .no-js .title-bar {
    display: none;
  }
}

If you're using Sass, you can write it like this:

.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }

  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}

JavaScript Reference

Initializing

The following files must be included in your JavaScript to use this plugin:

foundation.core.js
foundation.responsiveMenu.js
- With utility library foundation.util.triggers.js
- With utility library foundation.util.mediaQuery.js
foundation.responsiveToggle.js
- With utility library foundation.util.mediaQuery.js
- With utility library foundation.util.motion.js

Foundation.ResponsiveMenu

Creates a new instance of a responsive menu.

var elem = new Foundation.ResponsiveMenu(element, options);

Fires these events: ResponsiveMenu#event:init

Name	Type	Description
`element`	jQuery	jQuery object to make into a dropdown menu.
`options`	Object	Overrides to the default plugin settings.

Foundation.ResponsiveToggle

Creates a new instance of Tab Bar.

var elem = new Foundation.ResponsiveToggle(element, options);

Fires these events: ResponsiveToggle#event:init

Name	Type	Description
`element`	jQuery	jQuery object to attach tab bar functionality to.
`options`	Object	Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Responsive Navigation. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name	Type	Default	Description
`data-hide-for`	`string`	`medium`	The breakpoint after which the menu is always shown, and the tab bar is hidden.
`data-animate`	`boolean`	`false`	To decide if the toggle should be animated or not.

Events

These events will fire from any element with a Responsive Navigation plugin attached.

Name	Description
`toggled.zf.responsiveToggle`	Fires when the element attached to the tab bar toggles.

Methods

_destroy

$('#element').foundation('_destroy');

Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.

toggleMenu

$('#element').foundation('toggleMenu');

Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.

Fires these events: ResponsiveToggle#event:toggled

Responsive Menu

Drilldown Dropdown Menu

Accordion Dropdown Menu

Drilldown Accordion Menu

Responsive Toggle

Responsive Toggle with animation

Preventing FOUC

JavaScript Reference

Initializing

Foundation.ResponsiveMenu

Foundation.ResponsiveToggle

Plugin Options

Events

Methods

_destroy

toggleMenu