Menu
A list of actions that opens from a button, or where you right-click: commands, settings to turn on and off, a choice among a few. The menu is a native popover; canon.js adds the keyboard, submenus, checks and context menus. Specification: docs/components/menu.md
Anatomy
Every kind of item, open: a shortcut (a Kbd, with aria-keyshortcuts on the item), a disabled item (aria-disabled="true"), an item that opens a submenu, check items (role="menuitemcheckbox" with aria-checked), a named group with a heading (role="group", a .canon-menu-heading), avatars or icons before the label, separators (<hr>) and a destructive item (data-intent="danger"). The check and the submenu arrow are drawn by the theme.
Size
data-size on the menu, or on a container around the button and the menu: items take a text input's height (32 / 40 / 48).
Checks
role="menuitemcheckbox" turns on and off; role="menuitemradio" is one of its group (or of the menu), the chosen one checked. Both carry aria-checked, which canon.js changes before the click's listeners run, so they read the new state. Give a radio group a heading that says what it chooses.
Context menu
data-contextmenu on a region names a menu that opens where it is right-clicked (long-pressed, on touch screens that send one), kept inside the window; from the keyboard, under the focused element. The menu needs its own name (aria-label). Without JavaScript the browser's own menu shows.
Long menus
A menu taller than the room it has scrolls inside, and the keyboard brings its place into view.
Edge cases
Right to left: the menu opens from the button's right edge, submenus open to the left, and Left opens a submenu while Right closes it.