accessible-menu

accessible-menu

A JavaScript library to help you generate WCAG accessible menus in the DOM.

The two supported menu types are:

• Navigation Menubar, and
• Disclosure Navigation Menus

Browser Support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Opera
IE11, Edge *	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Installation

NPM

NPM is recommended for large-scale development, since it works well with bundlers like Webpack or Rollup.

# latest stable
npm install accessible-menu

CDN

For learning/prototyping purposes you can use the latest version with:

<script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/accessibleMenu.js"></script>

For production environments, it is recommend to use a specific version to avoid unforseen breaking changes:

<script src="https://cdn.jsdelivr.net/npm/accessible-menu@2.0.0/dist/accessibleMenu.js"></script>

Usage

To use accessible-menu, you first need to ensure your menu follows a basic menu structure.

<ul>
  <li><a>...</a></li>
  <li class="dropdown">
    <button>☰</button>
    <ul>
      <li><a>...</a></li>
      ...
    </ul>
  </li>
  <li><a>...</a></li>
  ...
</ul>

include the root menu or bundled library in your project:

import AccessibleMenu from "accessible-menu";

or

<script src="path/to/accessible-menu/dist/accessibleMenu.js"></script>

Once you have accessible-menu loaded, simply declare a new menu object.

const menu = new AccessibleMenu.DisclosureMenu({
  menuElement: menuDOMObject,
  menuItemSelector: "li-css-selector",
  menuLinkSelector: "li-css-selector",
  submenuItemSelector: "li-with-dropdown-css-selector",
  submenuToggleSelector: "dropdown-toggle-css-selector",
  submenuSelector: "dropdown-menu-css-selector",
  openClass: "class-to-open-menus",
});

Documentation

• Classes
  • BaseMenu
  • Menubar
  • DisclosureMenu
  • MenuItem
  • MenuToggle
• Basic examples
  • Single-level menu
  • Single-level menu with toggle
  • Two-level menu with toggle

Examples

Looking for a working example of accessible-menu? Check out these jsfiddles:

• Custom implementation
• Bootstrap 4
• TailwindCSS

Internet Explorer and Edge Support

For both IE and older (non-chromium-based) versions of Edge support, you will either need to use the CDN option, or run your code through Babel.

If you are compiling your own code without the help of something like Babel + core-js, you will need polyfills for Array.from(), Array.prototype.includes(), Array.find(), and String.prototype.startsWith() for IE11 support.

Versioning

This project uses Semantic Versioning 2.0.0 to keep track of releases.

For more detailed information about SemVer, please see the official documentation.

Contributing

If you're interested in contributing to the project, please read the Contribution Guidelines. Any and all contributions must follow these guidelines or they will not be accepted.

Changelog

2.1.0 (2020-07-25)

Features

• menu: allow for empty open and close classes (a58b1e3), closes #72
• menu: allow for multiple open and close classes (b4bc19f), closes #73

Bug Fixes

• events: make click handling a lot more strict (7f91256)
• toggle: allow for multiple open/close classes in IE with loop (608450d), closes #72

Documentation

• usage: update example to be plain html (302a87c), closes #75

Build System

• deps-dev: bump standard-version from 7.1.0 to 8.0.1 (7b6a2c2), closes #82
• deps-dev: bump standard-version from 7.1.0 to 8.0.1 (0fc954f)