Menubar

Default

Each menu is a <details>, so opening, closing and keyboard operation need no script. Note it is deliberately not given role="menubar": that role requires menuitem children plus roving tabindex and arrow-key handling, none of which CSS can supply. Claiming it would promise a screen-reader user navigation that is not there.

<nav class="menubar" aria-label="Main">
  <details class="menubar-menu">
    <summary>File</summary>
    <div class="menubar-content">
      <button type="button" class="item item-interactive"><span class="item-content"><span class="item-title">New file</span></span></button>
      <button type="button" class="item item-interactive"><span class="item-content"><span class="item-title">Open&hellip;</span></span></button>
    </div>
  </details>
  <details class="menubar-menu">
    <summary>Edit</summary>
    <div class="menubar-content">
      <button type="button" class="item item-interactive"><span class="item-content"><span class="item-title">Undo</span></span></button>
    </div>
  </details>
</nav>