WCAG Compliant Responsive Dropdown Navigation – accessible-menu

Category: Javascript , Menu & Navigation , Recommended | August 9, 2021
Author:NickDJM
Views Total:255 views
Official Page:Go to website
Last Update:August 9, 2021
License:MIT

Preview:

WCAG Compliant Responsive Dropdown Navigation – accessible-menu

Description:

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

Menu Types Included:

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.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

You Might Be Interested In:


One thought on “WCAG Compliant Responsive Dropdown Navigation – accessible-menu

Leave a Reply