An accessible menu for WordPress themes

Use and adapt this responsive and accessible menu in your WordPress theme development.

Features

• Keyboard navigation using tab, space, enter, and arrow keys
• All elements have ARIA names, roles and attributes

View demo

Using in WordPress

1. Add this to your HTML where you want the menu to appear
2. Replace 'yourtheme' with your theme's text domain

  <?php if (has_nav_menu('primary')) : ?>
  <div class="menu-container">     
    <button class="menu-button"><?php _e('Menu','yourtheme'); ?></button>
      <div id="site-header-menu" class="site-header-menu">
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e('Primary Menu', 'yourtheme'); ?>">
        <?php
          wp_nav_menu(array(
	        'theme_location' => 'primary',
	        'depth'          => 3,
	        ));
        ?>
        </nav>
      </div>
   </div>
  <?php endif; ?>

3. Do the following in your theme's functions.php

• Register the menu

  function register_my_menu() {
  register_nav_menu('primary',__( 'Primary Menu', 'yourtheme' ));
  }
  add_action( 'init', 'register_my_menu' );

• Enqueue the script

  wp_enqueue_script( 'yourtheme-script', get_template_directory_uri() . 'menu.js', array('jquery'), '1.0', true );

• Localize the script

  wp_localize_script( 'yourtheme-script', 'screenReaderText', array(
	   'expand'   => __( 'Expand child menu', 'yourtheme' ),
	   'collapse' => __( 'Collapse child menu', 'yourtheme' ),
  ));

This is optional (if your theme does not need to be internationalized), but if you do not do this, then you need to uncomment this line in menu.js:

  var screenReaderText = {"expand":"Expand child menu","collapse":"Collapse child menu"};

• Enqueue Font Awesome stylesheet

  wp_enqueue_style('font-awesome', get_template_directory() . '/font-awesome/font-awesome.css');

Using without WordPress

1. Uncomment this line in menu.js

  var screenReaderText = {"expand":"Expand child menu","collapse":"Collapse child menu"};

2. Construct your HTML using this example

  <div class="menu-container">     
    <button class="menu-button">Menu</button>
      <div id="site-header-menu" class="site-header-menu">
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu">
          <ul id="menu-main" class="primary-menu">
             <li class="menu-item"><a href="/">Menu-item 1</a></li>
             <li class="menu-item menu-item-has-children"><a href="/">Menu-item 2</a>
               <ul class="sub-menu">
                 <li class="menu-item"><a href="/">Menu-item 2.1</a></li>
                 <li class="menu-item menu-item-has-children"><a href="/">Menu-item 2.2</a>
                   <ul class="sub-menu">
                     <li class="menu-item"><a href="/">Menu-item 2.2.1</a></li>
                     <li class="menu-item"><a href="/">Menu-item 2.2.2</a></li>
                     <li class="menu-item"><a href="/">Menu-item 2.2.3</a></li>
                   </ul></li>
                 <li class="menu-item"><a href="/">Menu-item 2.3</a></li>
                </ul></li>
              <li class="menu-item menu-item-has-children"><a href="#">Menu-item 3</a>
                <ul class="sub-menu">
                  <li class="menu-item menu-item-has-children"><a href="#">Menu-item 3.1</a>
                    <ul class="sub-menu">
                      <li class="menu-item"><a href="/">Menu-item 3.1.1</a></li>
                      <li class="menu-item"><a href="/">Menu-item 3.1.2</a></li>
                      <li class="menu-item"><a href="/">Menu-item 3.1.3</a></li>
                      <li class="menu-item"><a href="/">Menu-item 3.1.4</a></li>
                    </ul></li>
                 </ul></li>
               <li class="menu-item"><a href="/">Menu-item 4</a></li>
            </ul>
          </nav>
       </div>
     </div>

Browsers

Browser testing courtesy of BrowserStack