Menubar

Core Idea

Menu visualmente persistente e horizontal, comum em aplicações desktop, dando acesso rápido a um conjunto consistente de comandos (File, Edit, View...). Built on Base UI Menubar.

Key Concepts

• MenubarMenu: agrupa um MenubarTrigger + MenubarContent — cada item da barra (File, Edit, View) é um MenubarMenu.
• MenubarTrigger: rótulo clicável na barra horizontal (não é um Button, é texto simples estilizado).
• inset: prop booleana em MenubarItem para alinhar itens sem ícone com os que têm (indentação consistente quando o menu mistura itens inset e não-inset).
• MenubarCheckboxItem / MenubarRadioGroup+MenubarRadioItem: mesma API do Dropdown/Context Menu.
• MenubarSub / MenubarSubTrigger / MenubarSubContent: submenu aninhado, mesma família de padrão.

Code Examples

<Menubar className="w-72">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem disabled>New Incognito Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarSub>
          <MenubarSubTrigger>Share</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarGroup>
              <MenubarItem>Email link</MenubarItem>
            </MenubarGroup>
          </MenubarSubContent>
        </MenubarSub>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent className="w-44">
      <MenubarGroup>
        <MenubarCheckboxItem>Bookmarks Bar</MenubarCheckboxItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem inset>Reload <MenubarShortcut>⌘R</MenubarShortcut></MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

• O que demonstra: múltiplos MenubarMenu numa barra (File, View), combinando shortcut, submenu e inset para alinhar itens sem checkbox/ícone à esquerda.

Reference Tables

Composição:

Menubar
└── MenubarMenu (repetido por item da barra: File, Edit, View...)
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarGroup (Label + Items)
        ├── MenubarSeparator
        ├── MenubarGroup (CheckboxItems)
        ├── MenubarGroup (RadioGroup)
        └── MenubarSub
            ├── MenubarSubTrigger
            └── MenubarSubContent

Key Takeaways

1. Menubar é composto por múltiplos MenubarMenu lado a lado (um por rótulo na barra), não um único menu.
2. inset em MenubarItem resolve o alinhamento quando o menu mistura itens com ícone/checkbox e itens simples de texto.
3. Compartilha toda a API de Group/Checkbox/Radio/Sub/Shortcut com Dropdown Menu e Context Menu.
4. Instalação manual requer npm install @base-ui/react.
5. Ideal para replicar UX de app desktop (editor de texto, IDE), não para menus de navegação web comuns (isso é Navigation Menu).

Connects To

• Dropdown Menu / Context Menu: mesma família de subcomponentes (Group, Checkbox, Radio, Sub, Shortcut); Menubar difere por manter todos os triggers visíveis simultaneamente numa barra.