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
Using in WordPress
- Add this to your HTML where you want the menu to appear
- 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; ?>- Do the following in your theme's
functions.php
function register_my_menu() {
register_nav_menu('primary',__( 'Primary Menu', 'yourtheme' ));
}
add_action( 'init', 'register_my_menu' ); wp_enqueue_script( 'yourtheme-script', get_template_directory_uri() . 'menu.js', array('jquery'), '1.0', true ); 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"}; wp_enqueue_style('font-awesome', get_template_directory() . '/font-awesome/font-awesome.css');Using without WordPress
- Uncomment this line in
menu.js
var screenReaderText = {"expand":"Expand child menu","collapse":"Collapse child menu"};- 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
