WCAG Compliant Responsive Dropdown Navigation – accessible-menu

Preview:

Description:

An accessible, WCAG compliant, fully responsive, multi-level, and mobile-friendly responsive dropdown navigation menu component written in pure JavaScript.

Menu Types Included:

• Disclosure Navigation
• Menubar (Responsive Navbar)
• Treeview (Vertical Tree Menu)

Extensions:

• accessible-menu-bootstrap-5
• accessible-menu-bootstrap-4

How to use it:

1. Install and import the accessible-menu with NPM.

# NPM
$ npm install accessible-menu --save

// All-in-one
import AccessibleMenu from 'accessible-menu';

// Disclosure Menu
import { DisclosureMenu } from "accessible-menu";

// Horizontal Menu Bar
import { Menubar } from "accessible-menu";

// Vertical Tree Menu
import { Treeview } from "accessible-menu";

2. Or include the UMD versions on the page as follows:

<!-- All-in-one -->
<script src="/path/to/dist/accessible-menu.min.js"></script>

<!-- Disclosure Menu -->
<script src="/path/to/dist/disclosure-menu.min.js"></script>

<!-- Horizontal Menu Bar -->
<script src="/path/to/dist/menubar.min.js"></script>

<!-- Vertical Tree Menu -->
<script src="/path/to/dist/treeview.min.js"></script>

3. The HTML structure for the accessible dropdown menu.

<nav id="main-nav" aria-label="Main">
  <!-- Toggle Button (Available For Menubar or DisclosureMenu) -->
  <button id="main-menu-toggle" aria-label="Toggle main menu">☰</button>
  <!-- Main Menu (Available For Menubar or DisclosureMenu) -->
  <ul id="main-menu">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="dropdown">
      <a href="#">Category ▼</a>
      <ul>
        <li>
          <a href="#">JavaScript</a>
        </li>
        <li>
          <a href="#">CSS</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Contact</a>
      <a href="#">About</a>
    </li>
  </ul>
</nav>

4. Create a disclosure menu.

const menu = new DisclosureMenu({
      menuElement: document.querySelector("#main-menu"),
      submenuItemSelector: ".dropdown",
      controllerElement: document.querySelector("#main-menu-toggle"),
      containerElement: document.querySelector("#main-nav"),
      openClass: "open",
});

5. Create a menu bar.

const menu = new Menubar({
      menuElement: document.querySelector("#main-menu"),
      submenuItemSelector: ".dropdown",
      controllerElement: document.querySelector("#main-menu-toggle"),
      containerElement: document.querySelector("#main-nav"),
      openClass: "open",
});

6. Create a vertical tree menu.

const menu = new Treeview({
      menuElement: document.querySelector("#main-menu"),
      submenuItemSelector: ".dropdown",
});

7. Apply your own styles to the menu as seen in our examples.

6. All possible parameters:

• menuElement: The menu element in the DOM.
• menuItemSelector: The selector string for menu items.
• submenuItemSelector: The selector string for submenu items.
• submenuToggleSelector: The selector string for submenu toggle triggers.
• submenuSelector: The selector string for the submenu itself.
• openClass: The class to use when a submenu is open.
• isTopLevel: A flag to mark the root menu.
• controllerElement: The element controlling the menu in the DOM.
• containerElement: The element containing the menu in the DOM.
• parentMenu: The menu containing this menu.

Changelog:

v3.0.4 (11/30/2021)

• Bug Fixes: menu: do not trigger hover events for pointer types pen or touch

v3.0.3 (11/11/2021)

• Bug Fixes accessibility: use pointer events for _handleHover() to ensure device support

v3.0.2 (10/27/2021)

• Bug Fixes

v3.0.1 (10/19/2021)

• Bug Fixes: accessibilty: replace click/touch events with pointer events

v3.0.0 (08/04/2021)

• disclosure: add getter/setter for optionalKeySupport
• disclosuremenu: add the ability to toggle optional keyboard support
• dist: add full esm support and kill IE support
• hover: change isHoverable to hoverType to handle dynamic hovers
• initialization: add a flag to allow/disallow auto initialization for subclass menus
• menu: add new method to focus a child of a given index
• menu: add shoudlFocus getter to control moving focus in the DOM
• menu: have focus follow hover when hover is set to dynamic
• subclass: add Treeview subclass
• toggle: allow expand and collapse methods to be silent
• implement browser module support
• Bug Fixes

v2.3.1 (06/11/2021)

• Bug Fixes

v2.3.0 (06/07/2021)

• menu: allow Menubar and DisclosureMenu to be imported individually
• compile: properly run code through babel
• menu: rewrite click events to resolve unresponiveness issue

v2.2.0 (03/25/2021)

• menu: add expand/collapse events to MenuToggles
• Bug Fixes

v2.1.1 (03/23/2021)

• Bug Fixes: accessibility: handle various scenarios causing inaccessible IDs
• fix(menubar): wait for menu to render before focussing child

v2.1.0 (07/25/2020)

• fix(toggle): allow for multiple open/close classes in IE with loop

07/18/2020

• fix(events): make click handling a lot more strict

05/23/2020

• feat(menu): allow for multiple open and close classes

05/20/2020

• fix(ie): add string.prototype.startsWith polyfill

05/09/2020

• fix(events): use touchup and mouseup events instead of click

05/07/2020

• v2.0.0