Menubar

Quando usar

Use o Menubar quando o produto se comporta como uma aplicacao desktop e precisa do vocabulario de menu classico: Arquivo, Editar, Exibir, cada um abrindo uma lista de comandos, alternancias e opcoes agrupadas. Faz sentido especialmente num terminal com controles de janela proprios (minimizar, maximizar, fechar), onde uma barra de menus reforça essa identidade de aplicativo nativo em vez de site.

Quando nao usar

Nao use para a navegacao principal entre areas do produto (Mercado, Portfolio...): isso e o NavigationMenu, que tem semantica de rota, nao de comando. Nao use para um menu de acoes de um unico elemento (o "..." de uma linha, o menu de um card): o dropdown-menu e mais leve e nao carrega a semantica de barra fixa com varios menus lado a lado.

Anatomia

• Menubar (data-slot="menubar"): a raiz, a barra em si (role="menubar").
• MenubarMenu: agrupa um MenubarTrigger com seu MenubarContent. Nao renderiza elemento proprio, e so contexto.
• MenubarTrigger (data-slot="menubar-trigger"): o nome do menu na barra ("Arquivo").
• MenubarPortal: o portal que leva o conteudo do menu para fora da arvore local. MenubarContent e MenubarSubContent ja o usam por baixo dos panos; fica exportado para quem precisar compor um portal proprio (por exemplo, apontar container para outro no do DOM).
• MenubarContent (data-slot="menubar-content"): o painel do menu.
• MenubarItem (data-slot="menubar-item"): um comando simples. Aceita inset para alinhar com itens vizinhos que tem indicador de checkbox ou radio.
• MenubarCheckboxItem (data-slot="menubar-checkbox-item"): alternancia independente dentro do menu, com marca de check quando ativa.
• MenubarRadioGroup / MenubarRadioItem (data-slot="menubar-radio-group" / "menubar-radio-item"): escolha unica entre opcoes do grupo, com uma bolinha marcando a selecionada.
• MenubarLabel (data-slot="menubar-label"): titulo de uma secao dentro do menu, sem interacao.
• MenubarSeparator (data-slot="menubar-separator"): linha divisoria entre grupos de itens.
• MenubarSub / MenubarSubTrigger / MenubarSubContent (data-slot="menubar-sub-trigger" / "menubar-sub-content"): submenu aninhado, aberto a partir de um item que tem mais opcoes (por exemplo "Tema" abrindo "Escuro" e "Claro").

Acessibilidade

A barra usa o padrao WAI-ARIA de menubar: Seta esquerda e Seta direita trocam de menu sem precisar fechar e reabrir, Seta para baixo entra no menu aberto e navega pelos itens, Enter ou Espaco ativa o item focado, Esc fecha o menu atual e devolve o foco ao trigger que o abriu. Cada item usa data-highlighted (nao :hover) para marcar o item ativo por teclado ou mouse, entao o estado visual e o mesmo nos dois casos. Todo MenubarCheckboxItem e MenubarRadioItem expõe o estado via aria-checked, herdado do Radix.