Responsive Navigation

An accessible navigation component to help create a masthead.

The responsive navigation component is a normal horizontal navigation on large screen, and collapses down to an off-canvas model on small viewports. The default HTML should work within the confines of WordPress, but some modifications may have to be implemented for your specific use case. No jQuery is required.

Examples

Usage

<nav class="site-navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
  <a href="#primary-nav" aria-controls="primary-nav" class="site-menu-toggle">
    <span class="screen-reader-text">Primary Menu</span>
    <span aria-hidden="true">☰</span>
  </a>

  <ul id="primary-nav" class="primary-menu">
    <li id="menu-item-1912" class="menu-item">
      <a href="#">About Us</a>
    </li>
    <li id="menu-item-1913" class="menu-item menu-item-has-children">
      <a href="#">Our Work</a>
      <ul class="sub-menu">
        <li id="menu-item-1914" class="menu-item">
          <a href="#">JavaScript</a>
        </li>
        <li id="menu-item-4494" class="menu-item menu-item-has-children">
          <a href="#">WordPress</a>
          <ul class="sub-menu">
            <li id="menu-item-4495" class="menu-item">
              <a href="#">Plugins</a>
            </li>
            <li id="menu-item-4496" class="menu-item">
              <a href="#">Themes</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li id="menu-item-1915" class="menu-item">
      <a href="#">Giving Back</a>
    </li>
  </ul>

</nav><!-- .site-navigation -->

					
<nav class="site-navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
  <a href="#primary-nav" aria-controls="primary-nav" class="site-menu-toggle">
    <span class="screen-reader-text">Primary Menu</span>
    <span aria-hidden="true">☰</span>
  </a>

  <?php
    wp_nav_menu( array(
      'theme_location' => 'primary',
      'menu_class'     => 'primary-menu',
      'menu_id'        => 'primary-nav',
    ) );
  ?>

</nav><!-- /.site-navigation -->

					
@import '@10up/component-navigation';

						
import Navigation from '@10up/component-navigation';

new Navigation( '.primary-menu', {
  action: 'click',
  onCreate: function() { /* Callback content */  },
  onOpen: function() { /* Callback content */  },
  onClose: function() { /* Callback content */  },
  onSubmenuOpen: function() { /* Callback content */  },
  onSubmenuClose: function() { /* Callback content */ }
} );

						
let navigationInstance = new TenUp.navigation('.primary-menu', {
  action: 'click',
  onCreate: function() { /* Callback content */  },
  onOpen: function() { /* Callback content */  },
  onClose: function() { /* Callback content */  },
  onSubmenuOpen: function() { /* Callback content */  },
  onSubmenuClose: function() { /* Callback content */ }
});

* Standalone JS is used on projects that are not set up to handle ES6. To use this version you will need to download the compiled JavaScript from the component's dist directory and pull it into your project. The same process should be followed with the CSS if it cannot process through the NPM package.

Documentation

Installation

This component accepts two arguments, the selector for the navigation container and an object containing configuration settings and optional callbacks.

npm install @10up/component-navigation --save

Options

List of Options for this component
action The action to use to open menu items (default) hover
onCreate Called after the component is initialized on page load
onOpen Called when a menu item is opened
onClose Called when a menu item is closed
onSubmenuOpen Called when a submenu item is opened
onSubmenuClose Called when a submenu item is closed

Methods

List of avaliable methods
destroy() Destroys the component, removing event listeners and any extra markup and attributes.

Classes

List of Classes used for this component
.site-navigation Wrapping class for the component.
.primary-menu The navigation menu itself, also the target for the method call.
.menu-item An individual menu item.
.sub-menu A nested menu.

Browser Compatibility

List of Browser Support for this component
Chrome Latest
Firefox Latest
Edge Latest
Safari Latest
IE 11 (Standalone only)

Resources