Menu

Menu

Class to set up a Menu with collapsible submenus.

Contents

• Example
• Constructor
• Instance Methods
• Properties
• Events
• References

Example

<ul class="menu">
  <li><a href="example.com"></a>
    <ul>
      <li><a href="example.com">Menu Item</a></li>
      <li><a href="example.com">Menu Item</a></li>
      <li><a href="example.com">Menu Item</a></li>
    </ul>
  </li>
  <li><a href="example.com">Menu Item</a></li>
  <li><a href="example.com">Menu Item</a>
    <ul>
      <li><a href="example.com">Menu Item</a></li>
      <li><a href="example.com">Menu Item</a></li>
      <li><a href="example.com">Menu Item</a></li>
      <li><a href="example.com">Menu Item</a></li>
    </ul>
  </li>
  <li><a href="example.com">Menu Item</a></li>
  <li><a href="example.com">Menu Item</a></li>
</ul>

import Menu from 'aria-components/menu';

const menu = document.querySelector('.menu');
const menu = new Menu(menu);

Constructor

Menu(menuListElement: HTMLUListElement);

menuListElement (Required) The list element containing menu items.

Instance Methods

Global methods and properties documented at src/README.

toString() Returns '[object Menu]'.

Properties

activeDisclosure The active submenu Disclosure, if any.

activeDisclosureId (setter) Set the active submenu Disclosure by ID and update submenu attributes.

activeDisclosureId (getter) Get the active submenu Disclosure ID.

Events

Events are namespaced by their component to avoid clashes with nested components.

'menu.init'

Fired after the component is initialized.

event.detail.instance The class instance from which the event originated.

'menu.stateChange'

Fired after inner Disclosure state is updated.

event.detail.instance The class instance from which the event originated.

event.detail.activeDisclosure The current expanded submenu.

'menu.destroy'

Fired after the component is destroyed.

event.detail.instance The class instance from which the event originated.

event.detail.element The element passed to the constructor.

References

• https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html