jQuery accessible keyboard-enhanced dropdown navigation

This jQuery plugin will enhance the keyboard navigation on a “classic” drop-down menu, by adding support of arrows.

Just test it on the menu that follows.

What is it?

This jQuery plugin simply enhances keyboard navigation on a “classic” drop-down menu.

Accessible?

What does it do?

This script adds listeners to keyboard and mouse to make a keyboard-friendly dropdown navigation system (using arrows and Esc). You can still use Tab if you prefer, it doesn’t affect this natural behaviour.

Keys

If you are on “main” navigation:

use Left/Right to see previous/next link
if you are on the first one, using Left will bring you to last one (same for last one and right
if the element has a sub-navigation, you will focus the first sub-element

If you are on a “sub”-navigation link:

use Up/Down to navigate through “sub”-navigation links
using Up/Down will trap you into “sub”-navigation links, for example, if you use Down on the last sub-element, the focus will be set to the first sub-element
use Left/Right to go to previous/next “sub”-navigation, if it exists, it will to the first sub-element, if not, it will go to previous/next navigation element
use Esc to close the sub-navigation, it will also give the focus back to parent navigation element

How to

How it works

The script detects a mouse enter in a navigation element and shows its sub-navigation. Of course, the sub-navigation will be visible as long as the mouse is in the navigation element.

It will add an attribute data-show-sub to the navigation items (to indicate if the element is opened or not), and an attribute data-visually-hidden on sub-navigation (to indicate if the sub-navigation is visible or not).

And of course: it also adds some keyboard listeners to enable a cool keyboard navigation using Left/Right,Up/Down arrows (and also Esc). Try it on the top menu, you will surely appreciate! ;)

How to use it

Just follow these conventions by using js-nav-system, js-nav-system__item, js-nav-system__link, js-nav-system__subnav, js-nav-system__subnav__item, js-nav-system__subnav__link:

<ul class="js-nav-system">

 <li class="js-nav-system__item">
  <a href="…" class="js-nav-system__link">Link</a>
 </li>

 <li class="js-nav-system__item">
  <a href="…" class="js-nav-system__link">Link 2</a>
   <ul class="js-nav-system__subnav">
    <li class="js-nav-system__subnav__item">
     <a href="…" class="js-nav-system__subnav__link">Sub Link 1</a>
    </li>
    <li class="js-nav-system__subnav__item">
     <a href="…" class="js-nav-system__subnav__link">Sub Link 2</a>
    </li>
   </ul>
 </li>

 <!-- etc. -->

 <li class="js-nav-system__item">
  <a href="…" class="js-nav-system__link">Link x</a>
   <ul class="js-nav-system__subnav">
    <li class="js-nav-system__subnav__item">
     <a href="…" class="js-nav-system__subnav__link">Sub Link x</a>
    </li>
    <li class="js-nav-system__subnav__item">
     <a href="…" class="js-nav-system__subnav__link">Sub Link x+1</a>
    </li>
    <li class="js-nav-system__subnav__item">
     <a href="…" class="js-nav-system__subnav__link">Sub Link x+1</a>
    </li>
   </ul>
  </li>	 

 </ul>

Of course it is supposed to work on ul li a tags, but it can work on other elements (like form inputs) if the structure is kept.

For styles, here are minimal styles needed:

.subnav {
  position: absolute;
}

[data-visually-hidden="true"] {
  display: none;
}
[data-visually-hidden="false"] {
  display: block;
}

Then put the code of the plugin between:

$(document).ready(function(){
    // put the code of the plugin here
    });

The plugin will do the rest. Yes, just for you.

Other informations

Last news

9th of April 2016: fixed and enhanced keyboard management in subnavs, thanks again to @jbcordina.

27th of March 2016: fixed two bugs in keyboard management, thanks to @jbcordina.

7th of February 2016: this plugin is available on NPMjs.com, and you can install it with npm i jquery-accessible-subnav-dropdown.

License

No license problem, it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.

However, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)

Weight

It is lightweight: 11.6kb(development), 5.3kb (minified), only 750 bytes minified and gzipped.

Used by

This plugin has been used for example on Vision Laser or on Office of the High Commissioner for Human Rights.

Tribute

The idea of this script is inspired by Heydon’s simple dropdowns example. Seriously, you should have a look at his great work in accessibility.