Menubar

import * as React from "react"
 
type Menu = { label: string; items: string[] }
 
export function PulsoMenubar({ menus }: { menus: Menu[] }) {
  return (
    <nav aria-label="Menu da aplicação" className="inline-flex rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--card)] p-1">
      {menus.map((menu) => (
        <button key={menu.label} type="button" className="rounded-[var(--radius-sm)] px-3 py-1.5 text-sm text-[var(--fg-muted)] hover:bg-[var(--muted)] hover:text-[var(--fg)] focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]">
          {menu.label}
        </button>
      ))}
    </nav>
  )
}

<PulsoMenubar menus={[{ label: "Caso", items: ["Arquivar", "Escalar"] }, { label: "Exibir", items: ["Lista", "Timeline"] }]} />

<nav class="menubar" aria-label="Menu da aplicação">
  <button type="button">Caso</button>
  <button type="button">Exibir</button>
  <button type="button">Ajuda</button>
</nav>

.menubar { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--card); }
.menubar button { border:0; border-radius:var(--radius-sm); background:transparent; color:var(--fg-muted); padding:6px 12px; font:inherit; }
.menubar button:hover { background:var(--muted); color:var(--fg); }
.menubar button:focus-visible { outline:var(--ring-width) solid var(--ring); outline-offset:2px; }