Menubar
Desktop-style menu bar (File/Edit/View with cascading submenus), zero JS. Triggers open popover menus on the .dropdown-menu skin; submenus are popovers nested inside their parent menu's DOM (so opening one keeps the ancestor open), placed to the inline-end of their invoker item via implicit-anchor positioning. Items dismiss the chain with popovertarget/popovertargetaction="hide". Progressive layers: interest invokers (interestfor attribute, Chromium-first) add hover-open; /lozenge-sprinkle.js adds roving arrow-key focus.
Root: .menubar on <nav>, <div>
Example
<nav class="menubar" aria-label="App menu"><button class="menubar-trigger" popovertarget="mb-f">File</button><div id="mb-f" popover class="dropdown-menu"><button class="dropdown-item" popovertarget="mb-f" popovertargetaction="hide">New issue<span class="menubar-kbd">⌘N</span></button></div></nav>Contract
Structure
| Selector | Required | Description |
|---|---|---|
.menubar-trigger | required | One trigger button per top-level menu, each followed by its [popover].dropdown-menu sibling (adjacency drives the pressed state via :has(+ :popover-open)). |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.menubar | aria-label | required |
This is intentionally NOT role=menubar out of the box: without roving focus, honest semantics are a nav of buttons opening menus — which is what the markup says. If you load the sprinkle and want full ARIA menu semantics, add role=menubar/menu/menuitem yourself; the visual layer is identical. .menubar-subtrigger marks items that open submenus (chevron); .menubar-kbd renders shortcut hints.
Nesting
Allowed in:
page headers.navbartoolbars
Never inside (or containing):
.menubar .menubar