Accessible Menu

Appearance

Quick Start ​

Installation ​

You can install Accessible Menu into your project using NPM.

bash
# latest stable
npm install accessible-menu

Using Accessible Menu from a CDN ​

You can use Accessible Menu directly from a CDN via a script tag.

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

We use jsdelivr as the example, but you can use any cdn you prefer, such as unpkg. You can also download the files listed in the CDN and host them yourself if preferred.

Setup ​

Single-level Menu ​

The fastest setup for Accessible Menu is a single-level menu.

html
<nav id="example-menu" aria-label="Example">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/projects">Projects</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
js
import { DisclosureMenu } from "accessible-menu";

const menu = new DisclosureMenu({
  menuElement: document.querySelector("#example-menu"),
});
js
import { Menubar } from "accessible-menu";

const menu = new Menubar({
  menuElement: document.querySelector("#example-menu"),
});
js
import { Treeview } from "accessible-menu";

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

Accessible Menu will self-initialize once created adding the appropriate roles, attributes, and keybindings.

Two-level Menu ​

You can also generate two-level menus with Accessible Menu by passing in the submenuItemSelector option during creation.

html
<nav id="example-menu" aria-label="Example">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li class="dropdown">
      <a href="#">Projects</a>
      <ul>
        <li><a href="/projects/fun-project">Fun project</a></li>
        <li><a href="/projects/cool-project">Cool project</a></li>
      </ul>
    </li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
js
import { DisclosureMenu } from "accessible-menu";

const menu = new DisclosureMenu({
  menuElement: document.querySelector("#example-menu"),
});
js
import { Menubar } from "accessible-menu";

const menu = new Menubar({
  menuElement: document.querySelector("#example-menu"),
});
js
import { Treeview } from "accessible-menu";

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