Menubar

Top-level menus in a row, each opening a popover menu.

.menubar aequitas.js

Examples

Menubar

Anatomy

`nav.menubar`	Row of top-level items, 1px apart.
`> button`	A top-level item. `popovertarget` points it at a `.menu`; an `<a>` works for items that navigate.
`.menu[popover]`	The menu each item opens, anchored below it. See Menu.

API

Attribute	Values	Description
`popovertarget`	`<id>`	On an item: the id of the `.menu` popover it toggles. Native, no script.
`aria-expanded`	`true`	Holds the item's hover fill while its menu is open. aequitas.js keeps it in sync with the popover; without it, set it yourself.

Behaviour

When a menu opens or closes, aequitas.js sets aria-expanded on every item that targets it (by popovertarget or data-open), so the item holds its fill while its menu is open. Without it the menus still open and close natively; only the open style is lost.

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 ordinary buttons in a <nav>; Tab reaches each one. Don't add role="menubar" or role="menu" unless you also implement arrow-key navigation, which aequitas does not provide.
popovertarget exposes the expanded state to assistive tech by itself; aria-expanded here is only for the open style.
Keyboard shortcuts in <kbd> are visual hints. Bind them yourself, or leave them out.

Key	Effect
`Tab` / `ShiftTab`	Moves between items, and into an open menu.
`Enter` / `Space`	Opens or closes the item's menu.
`Esc`	Closes the open menu (native popover light dismiss).