menu.ts

WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript. Supports checkbox item, radio item, and infinitely nested menus.

Usage

import Menu from './menu';

new Menu(root, options);
// => Menu
//
// root: HTMLElement
// options (optional): MenuOptions

🪄 Options

interface MenuOptions {
  animation?: {
    duration?: number;            // ms (default: 300)
  };
  delay?: number;                 // ms (default: 200)
  popover?: {
    menu?: MenuPopoverOptions;
    submenu?: MenuPopoverOptions;
    transformOrigin?: boolean;    // default: true
  };
  selector?: {
    checkboxItem?: string;        // default: '[role="menuitemcheckbox"]'
    group?: string;               // default: '[role="group"]'
    item?: string;                // default: '[role^="menuitem"]'
    list?: string;                // default: '[role="menu"]'
    radioItem?: string;           // default: '[role="menuitemradio"]'
    trigger?: string;             // default: '[data-menu-trigger]'
  };
}

interface MenuPopoverOptions {
  arrow?: boolean;                // default: true
  middleware?: Middleware[];      // default: [flip(), offset(), shift()]
  placement?: Placement;          // default: 'bottom-start' (menu) / 'right-start' (submenu)
}

Note

Middleware and Placement are provided by Floating UI. See the Floating UI docs for details.

📦 APIs

open

menu.open();
// => void

close

menu.close();
// => void

destroy

Destroys the instance and cleans up all event listeners and submenus.

menu.destroy(force);
// => Promise<void>
//
// force (optional): If true, skips waiting for animations to finish.

Demo

https://y14e.github.io/menu-ts/

Credits

• Floating UI