Menu

A popover anchored to its button, with separators, group labels, shortcuts, checks and destructive items.

.menu aequitas.js

Examples

Anatomy

`button[popovertarget]`	The invoker; it becomes the menu's anchor.
`.menu[popover]`	The panel, anchored below the invoker and flipped when clipped.
`> button, > a`	Items, full width. A trailing `<kbd>` is pushed to the end as a shortcut hint.
`> h6`	Optional group label.
`> hr`	Optional separator, edge to edge.

API

Attribute	Values	Description
`popover`	boolean	Required. Auto popovers close on Esc, on an outside click, and when another menu opens.
`popovertarget`	`<id>`	On the invoker: toggles and anchors the menu.
`aria-pressed`	`truefalse`	On an item: reserves a check column; `true` shows a ✓ and announces the item as pressed.
`data-tone`	`danger`	On an item: colours its text, for destructive actions.
`data-close`	boolean	On an item: aequitas.js hides the menu when it is clicked.

Behaviour

A click on a [data-close] item hides the menu, and aria-expanded on the invoker follows the menu as it opens and closes. Without it, popovertarget still opens and closes the menu natively, but items leave it open until you hide it.

From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.

Accessibility

The items are plain buttons in tab order. Only add role="menu" and role="menuitem" if you also script arrow-key focus, since those roles promise it.
A toggle item is a <button aria-pressed>, which every screen reader announces as pressed or not. role="menuitemcheckbox" with aria-checked also draws the check, but it is only valid inside a role="menu".
Clicking an item does not close the menu by itself: add data-close, or call hidePopover() in your handler.

Key	Effect
`Enter` / `Space`	On the invoker: toggles the menu; on an item: activates it (native).
`Tab` / `ShiftTab`	Moves between items. There is no arrow-key navigation.
`Esc`	Closes the menu (native popover).