Menubar

Overview

Menubar é o menu horizontal estilo desktop — File, Edit, View, Help. Use quando estiver portando um padrão de aplicativo desktop para web (editores de código, planilhas, ferramentas de design, DAWs). Para a maioria dos produtos web, DropdownMenu resolve melhor o mesmo conjunto de ações.

Suporta submenus aninhados, checkbox items (toggles), radio groups (seleção única) e shortcuts alinhados à direita — toda a anatomia clássica de menu bar.

Anatomy

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>Open Recent</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>file.tsx</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

A barra é uma sequência de MenubarMenu, cada um com seu trigger

• content. Items podem ser ações simples, submenus, checkboxes ou radio groups.

Subcomponents

Usage

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarShortcut,
  MenubarTrigger
} from "@kalvner/kds/navigation/menubar";

export function EditorMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Open <MenubarShortcut>⌘O</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

When to use

• Editores de código web (CodeMirror-based, Monaco-based).
• Planilhas/spreadsheets com File/Edit/Format/Data/Tools.
• Apps de design (canvas tools com modes File/Edit/Object/View).
• DAWs e tools profissionais que esperam o padrão desktop.

When not to use

• Sites de marketing — use NavigationMenu.
• Apps web mainstream (CRUD apps, dashboards) — use DropdownMenu.
• Mobile — Menubar não tem fallback gracioso; em mobile transforme em DropdownMenu único ou Sheet.
• Apps com poucas ações (≤3 grupos de comandos) — DropdownMenu resolve com menos peso.

Best practices

• Grupos canônicos. File para arquivos, Edit para mudanças no documento, View para apresentação, Help para meta. Não invente nomes "criativos".
• Shortcuts à direita. <MenubarShortcut> alinha à direita com text-muted-foreground — convenção universal de menu bar.
• Separadores agrupam. Use MenubarSeparator para separar grupos lógicos (ex.: Open / Save / Save As… / Export…).
• Disabled items aparecem. Em vez de esconder um comando que não está disponível agora (Redo quando não há nada para refazer), use disabled — o usuário aprende que o comando existe.
• Não aninhe demais. Submenus de 2 níveis são o limite; 3+ fica labiríntico.

Accessibility

Related

• DropdownMenu — escolha padrão para menus de ação na web.
• NavigationMenu — para nav primária de marketing.
• ContextMenu — menu de right-click.