Widget: Menu

Example

Vertical Menubar


Horizontal Menubar


Details

Implementing This Widget

Implement the Menu widget whenever you want to have an accessible Vertical Menubar, Horizontal Menubar, or Button-Triggered Menu.

Prerequisites:

None

To implement the Menu widget:

  1. Create a div in your DOM to hold your menu.
  2. Create a data object and a config object, with fields as defined below.
  3. Invoke createMenu(container, data, config).

Object field definition reference:

  • The Data Object: Your menu is fed by an array of objects. Each object in the array corresponds to an item in your menu. The objects have the following keys:
    • type: This is either 'item', 'checkbox', 'radio', 'separator' or 'submenu'. This value determines the type of menu item you're going to get.
    • either label or markup: The label is the text associated with your item. If you're creating a checkbox or radio button, the markup option will be ignored - simply provide a label. However, if you're providing an item or a submenu, you have the option to provide a markup value instead of a label. This allows you to write straight HTML which will be embedded into the menu item, in case you want to style the menu item with images or whatever. The separator type ignores this field entirely.
    • handler: If you're creating a menu item of type 'item', you can specify a 'handler' - this is a function that will be invoked when the menu item is clicked or when a keyboard user hits enter. Radio buttons and checkboxes have their own activation behavior, and submenus expand or contract on click and arrow key navigation - so this is only necessary for the 'item' type.
    • classes: An array of strings - these are optional, and if provided will add these strings to the classList of the created menuitem.
    • disabled: A boolean. If true, the menuitem will not respond to user attempts to activate it.
    • children: If your menuitem type is 'submenu', include an array of child items. The items in this list should have the same schema as we're discussing now.
  • The Config Object: A simple object with only three properties, required when instantiating a menu.
    • orientation: This can either be 'vertical' or 'horizontal'. It defaults to 'vertical'.
    • trigger: This is an HTML Element, usually a button, used to make the menu visible. This is optional - if you leave it out, then the menu's role is 'menu-bar' and it assumes it's always visible. If you set it, it gets aria-haspopup="true" and the menu gets the role 'menu'.
    • wrap: An optional boolean, it defaults to false. Does the top-level menu wrap? (i.e. if you advance beyond the end, does it return to the beginning?) If true, HOME and END do nothing.

Expected Operation and Accessibility Features

Start using it, and here's what happens...

Validation and Developer Notes

In order to validate this control, you must ....

Notes for the Developer:

[[placeholder]]

Example Implementation Reference

To view an implementation of this widget, see Menu widget example.