Desktop Menu Bar

<!--
  A desktop application menu bar. role="menubar" is horizontal: Left/Right move
  between File/Edit/View, ArrowDown opens the focused one, and Left/Right walk
  between menus while one is open. Shown with File open.
-->
<div role="menubar" aria-label="Application" aria-orientation="horizontal" class="flex w-full flex-wrap items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 dark:border-gray-800 dark:bg-gray-900">
  <div class="relative">
    <button type="button" role="menuitem" aria-haspopup="menu" aria-expanded="true" class="rounded-md bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-100">File</button>
    <div role="menu" aria-label="File" class="absolute left-0 top-[calc(100%+0.375rem)] z-20 min-w-44 rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
      <button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">New file</button>
      <button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">Open…</button>
    </div>
  </div>
  <button type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Edit</button>
  <button type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">View</button>
</div>