Menubar

<div class="menubar" aria-label="Application menu">
  <div class="dropdown-menu">
    <button type="button" aria-haspopup="menu" aria-controls="menubar-file-menu" aria-expanded="false">File</button>
    <div data-popover aria-hidden="true" class="min-w-40">
      <div role="menu" id="menubar-file-menu">
        <div role="menuitem">New Tab</div>
        <div role="menuitem">New Window</div>
        <hr role="separator" />
        <div role="menuitem">Share</div>
      </div>
    </div>
  </div>
  <div class="dropdown-menu">
    <button type="button" aria-haspopup="menu" aria-controls="menubar-edit-menu" aria-expanded="false">Edit</button>
    <div data-popover aria-hidden="true" class="min-w-40">
      <div role="menu" id="menubar-edit-menu">
        <div role="menuitem">Undo</div>
        <div role="menuitem">Redo</div>
        <hr role="separator" />
        <div role="menuitem">Find</div>
      </div>
    </div>
  </div>
</div>

Usage

5h3ll-ui Menubar is intentionally composed from the existing Dropdown Menu primitive instead of porting upstream React/Base UI internals. Each top-level menu is a direct child .dropdown-menu inside a .menubar root.

Include CSS

@import "tailwindcss";
@import "5h3ll-ui/vega.css";

Or import the base CSS plus Menubar and Dropdown Menu component CSS.

@import "tailwindcss";
@import "5h3ll-ui/base.css";
@import "5h3ll-ui/components/dropdown-menu.css";
@import "5h3ll-ui/components/menubar.css";
@import "5h3ll-ui/styles/vega.css";

Include JavaScript

<script src="/assets/js/all.min.js" defer></script>

Or copy the runtime plus both behavior files separately.

<script src="/assets/js/5h3ll-ui.min.js" defer></script>
<script src="/assets/js/dropdown-menu.min.js" defer></script>
<script src="/assets/js/menubar.min.js" defer></script>

Add your menubar HTML

<div class="menubar" aria-label="Application menu">
  <div class="dropdown-menu">
    <button type="button" aria-haspopup="menu" aria-controls="file-menu" aria-expanded="false">File</button>
    <div data-popover aria-hidden="true">
      <div role="menu" id="file-menu">...</div>
    </div>
  </div>
</div>

HTML structure

<div class=“menubar”>: Menubar root. Provide an accessible name with aria-label or aria-labelledby.
<div class=“dropdown-menu”>: Direct child menu wrapper. Menubar behavior scans only direct children so top-level menu order stays explicit.
<button aria-haspopup=“menu” aria-expanded=“false”>: Top-level trigger.
<div data-popover> <div role=“menu”> …: Menu content uses the same child markup as Dropdown Menu, including groups, headings, separators, and checkbox/radio items.

JavaScript API

API	Type	Description
`menubar.refresh()`	Method	Rescans direct child `.dropdown-menu` roots after menus are added or removed.

The Menubar script also adds:

left and right arrow movement across top-level triggers
ArrowDown and ArrowUp opening from the current trigger
cross-menu switching while a menu is open
hover-to-switch behavior once any top-level menu is already open

Examples

<div class="menubar" aria-label="Editor menu">
  <div class="dropdown-menu">
    <button type="button" aria-haspopup="menu" aria-controls="editor-file-menu" aria-expanded="false">File</button>
    <div data-popover aria-hidden="true" class="min-w-44">
      <div role="menu" id="editor-file-menu">
        <div role="group" aria-labelledby="editor-file-heading">
          <div role="heading" id="editor-file-heading">File</div>
          <div role="menuitem"><span>New Tab</span><kbd>⌘T</kbd></div>
          <div role="menuitem"><span>New Window</span><kbd>⇧⌘N</kbd></div>
          <div role="menuitem">Open…</div>
        </div>
        <hr role="separator" />
        <div role="menuitem">Share</div>
      </div>
    </div>
  </div>
  <div class="dropdown-menu">
    <button type="button" aria-haspopup="menu" aria-controls="editor-edit-menu" aria-expanded="false">Edit</button>
    <div data-popover aria-hidden="true" class="min-w-44">
      <div role="menu" id="editor-edit-menu">
        <div role="menuitem"><span>Undo</span><kbd>⌘Z</kbd></div>
        <div role="menuitem"><span>Redo</span><kbd>⇧⌘Z</kbd></div>
        <hr role="separator" />
        <div role="menuitem">Cut</div>
        <div role="menuitem">Copy</div>
        <div role="menuitem">Paste</div>
      </div>
    </div>
  </div>
  <div class="dropdown-menu">
    <button type="button" aria-haspopup="menu" aria-controls="editor-view-menu" aria-expanded="false">View</button>
    <div data-popover aria-hidden="true" class="min-w-44">
      <div role="menu" id="editor-view-menu">
        <div role="menuitemcheckbox" aria-checked="true">
          <span data-indicator>✓</span>
          <span>Status Bar</span>
        </div>
        <div role="menuitemcheckbox" aria-checked="false">
          <span data-indicator>✓</span>
          <span>Activity Bar</span>
        </div>
      </div>
    </div>
  </div>
</div>