Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Menubar

Barra de menus — uma fileira de menus, como Arquivo, Editar e Exibir num programa de computador. Use só em telas com cara de aplicativo e muitos comandos, como um editor; numa página comum, uma barra de ferramentas ou alguns botões de menu são mais fáceis de achar.

Feito com Base UIPadrão WAI-ARIA MenubarComponente clienteCódigo ↗

Instalação

Configure o Camaleo uma vez (Instalação) e importe as partes que precisar. Os menus renderizam num portal e mantêm o estilo, o modo e a cor da página em volta.

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarSeparator } from "@camaleo/react";

Anatomia

O Menubar é a barra, uma parada só do Tab. Cada MenubarMenu junta um MenubarTrigger na barra com um popup MenubarContent, renderizado num portal. Dentro vão os itens, os itens de marcar, os de opção e os submenus.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima, e todos começam fechados.

minimal · light · #3fa34d

Com atalhos

Mostre cada atalho com Kbd para a pessoa aprender enquanto navega, e adicione aria-keyshortcuts para o leitor de tela falar também. A barra só mostra o atalho: as teclas você liga no seu app.

Plano de lançamento do 4º tri: app de celular em 18/11 e novo preço em 01/12.

Itens de marcar

Abra Exibir e desligue a régua. O MenubarCheckboxItem continua aberto depois do clique e informa aria-checked, então dá para mudar várias opções seguidas.

Plano de lançamento do 4º tri: app de celular em 18/11 e novo preço em 01/12.

Itens de opção

Escolha um nível de zoom. O MenubarRadioGroup serve para um valor entre poucos; cada item é lido como "marcado" ou "não marcado".

Submenu

Agrupe variações de um comando, como os formatos de exportação, num MenubarSub. Fique num nível só: cada nível é mais um passar do mouse e mais uma seta.

Desativado, com o motivo

Deixe o comando indisponível no lugar para a pessoa aprender onde ele fica, e diga o porquê no item: itens desativados continuam recebendo foco, então o motivo é lido junto com o nome.

Destrutivo, com confirmação

Escolha "Excluir documento". Ele vem por último, depois de um separador, e abre um AlertDialog; o finalFocus devolve o foco para Arquivo quando ele fecha.

Agir e avisar

Escolha um comando. O foco volta para o gatilho do menu, e uma linha com role="status" conta ao leitor de tela o que aconteceu, porque o menu que mostrava a ação sumiu.

Em contexto

A menubar fica no alto da janela de um app, acima do trabalho. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Orçamento 2027Salvo
Item1º tri2º tri
Aluguel do escritórioR$ 18.000,00R$ 18.000,00
Folha de pagamentoR$ 142.500,00R$ 151.200,00
AnúnciosR$ 9.800,00R$ 12.400,00
PlanilhaMenubar · Badge · Kbd · Table
Editor de fotosMenubar · Toolbar
  • Júlia MendesContrato assinado do escritório de RecifeNão lida
  • Rafael CostaRe: Plano do 4º tri, comentários sobre o cronograma
  • Lucas TavaresA fatura INV-4031 vence em 05/11
Cliente de e-mailMenubar · Avatar · Badge · Kbd

Boas práticas

Plano de lançamento do 4º tri: app de celular em 18/11 e novo preço em 01/12.

FaçaMenubar para um app com muitos comandos.

Editores, planilhas e ferramentas de design têm dezenas de comandos; Arquivo, Editar e Formatar dão a cada um um lugar que a pessoa já conhece.

EviteMenubar para ir de uma página a outra.

Os itens não são links: nada de clique do meio, nada de "abrir em nova aba", e setas que quem visita um site não espera. Use um NavigationMenu.

FaçaComandos parecidos juntos, com os atalhos.

Os separadores dividem criar, salvar e imprimir, então a pessoa percorre três grupos curtos em vez de uma lista comprida.

EviteDez comandos sem ordem.

Imprimir ao lado de Novo, Excluir ao lado de Renomear: a pessoa lê linha por linha, e um deslize cai no item errado.

Props

PropriedadeTipoPadrãoDescrição
iconReactNode—Ícone antes do texto. Fica escondido do leitor de tela.
shortcutReactNode—Atalho mostrado no fim da linha, normalmente um Kbd. Só aparece: use junto com aria-keyshortcuts e ligue as teclas você mesmo.
tone"danger"—"danger" pinta de vermelho um item destrutivo.
renderReactElement | (props, state) => ReactElement—Renderiza outro elemento, como um <a> para um link.
onClickfunction—Roda quando o item é escolhido com clique, Enter ou Espaço.
disabledbooleanfalseDesativa o item. Ele continua recebendo foco, então a pessoa ainda consegue lê-lo.
labelstring—Texto para a busca por letra quando o conteúdo do item não é texto simples.
closeOnClickbooleantrueSe escolher o item fecha o menu.

Estas são as props do MenubarItem. O Menubar aceita modal, disabled, loopFocus e orientation, e precisa de um aria-label. O MenubarCheckboxItem aceita checked, defaultChecked, onCheckedChange e shortcut; o MenubarRadioGroup aceita value, defaultValue e onValueChange. O MenubarMenu aceita as props da raiz de menu do Base UI, como open e onOpenChange.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria barra.

Atributos

data-popup-openno gatilho cujo menu está aberto
data-highlightedno item sob o teclado ou o mouse
data-checked · data-uncheckednos itens de marcar e de opção
data-disablednum item desativado
data-tonedanger
data-orientationhorizontal · vertical (na barra)

Tokens que ele lê

Cor

--cml-accent--cml-accent-fg--cml-border-control--cml-border-subtle--cml-brand--cml-danger--cml-fg--cml-fg-muted--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-item-highlight-fg--cml-popover-bg--cml-popover-border--cml-shadow-popover--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-popover-border-width--cml-popover-padding--cml-radius-control--cml-radius-popover

Tipografia e movimento

--cml-font-body

Só deste componente

--cml-disabled-opacity--cml-item-highlight--cml-item-hover--cml-menubar-active-bg--cml-menubar-active-fg--cml-menubar-bg--cml-menubar-height--cml-menubar-popup-radius--cml-menubar-popup-width--cml-menubar-radius--cml-menubar-shadow

Acessibilidade

TabEntra na barra, no último menu usado, e sai dela: a barra inteira é uma parada só do Tab.
→ / ←Na barra: vai para o menu seguinte ou anterior, dando a volta nas pontas. Num menu aberto: → abre um submenu e ← fecha; nos outros itens, abrem o menu seguinte ou anterior.
↓ / Enter / EspaçoNum menu da barra: abre e leva o foco ao primeiro item ativo.
↓ / ↑Passa de um item para outro, dando a volta nas pontas. Itens desativados entram na conta.
Home / EndVai para o primeiro ou o último item.
A–ZVai para o próximo item que começa com essa letra.
Enter / EspaçoRoda o item e fecha o menu; num item de marcar ou de opção, alterna e mantém o menu aberto.
EscFecha o submenu, ou o menu, e devolve o foco ao gatilho na barra.

Relacionados

MenuUm menu atrás de um botão, para as ações de uma linha ou de um card.Navigation menuLinks para as páginas de um site, com painéis que abrem.KbdMostra o atalho de teclado ao lado de um comando.
Esta página foi útil? · Editar esta página no GitHub