Accessible Menu

Appearance

Treeviews ​

Treeviews are Accessible Menu's implementation of the Navigation Treeviews.

When keyboard focus leaves the tree, expanded branches stay expanded. The current item remains in the tab sequence so you can return to it.

The aria-label on <nav> names the navigation landmark. The root <ul> needs its own accessible name for the treeview. The examples without a controller button use aria-label on the root list. Collapsible examples receive aria-labelledby from their controller button during initialization.

Single-level Treeview ​

The following is an example of how you would set up a single-level Treeview.

html
<nav id="creature-menu" aria-label="Creature Classifications">
  <ul aria-label="Creature Classifications">
    <li><a href="#">Humanoids</a></li>
    <li><a href="#">Beasts</a></li>
    <li><a href="#">Dragons</a></li>
    <li><a href="#">Fey</a></li>
    <li><a href="#">Undead</a></li>
  </ul>
</nav>
js
import { Treeview } from "accessible-menu";

const menu = document.querySelector("#creature-menu ul");

const disclosureMenu = new Treeview({
  menuElement: menu,
});

Multi-level Treeview ​

The following is an example of how you would set up a multi-level Treeview.

html
<nav id="creature-menu" aria-label="Creature Classifications">
  <ul aria-label="Creature Classifications">
    <li><a href="#">Humanoids</a></li>
    <li><a href="#">Beasts</a></li>
    <li class="dropdown">
      <a href="#">Dragons</a>
      <ul>
        <li><a href="#">Chromatic</a></li>
        <li><a href="#">Metallic</a></li>
        <li><a href="#">Gem</a></li>
      </ul>
    </li>
    <li><a href="#">Fey</a></li>
    <li><a href="#">Undead</a></li>
  </ul>
</nav>
js
import { Treeview } from "accessible-menu";

const menu = document.querySelector("#creature-menu ul");

const disclosureMenu = new Treeview({
  menuElement: menu,
});

Collapsible Treeview ​

The following is an example of how you would set up a collapsible Treeview.

html
<nav id="creature-menu" aria-label="Creature Classifications">
  <button>Toggle Menu</button>
  <ul>
    <li><a href="#">Humanoids</a></li>
    <li><a href="#">Beasts</a></li>
    <li><a href="#">Dragons</a></li>
    <li><a href="#">Fey</a></li>
    <li><a href="#">Undead</a></li>
  </ul>
</nav>
js
import { Treeview } from "accessible-menu";

const nav = document.querySelector("#creature-menu");
const menu = document.querySelector("#creature-menu ul");
const toggle = document.querySelector("#creature-menu button");

const disclosureMenu = new Treeview({
  menuElement: menu,
  containerElement: nav,
  controllerElement: toggle,
});

Interactive Example ​

You can find an interactive example of a Treeview here in this codepen.