Primitivenavigation

Menubar

Stable

Barra de comandos persistente de uma aplicação. Composto sobre Base UI Menubar e sobre o DropdownMenu do Up Web DS, que fornece todo o interior — o menubar não reimplementa item, submenu nem estado. O que ele acrescenta é ser um controle só: a página gasta um único Tab stop, as setas andam entre os menus, e com um menu aberto ir para o lado abre o vizinho sem clique.

Instalação

npx up-web-ds add menubar

Gera check para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Default

With State And Submenu

All states

Default

With State And Submenu

Metadata

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: navigation
Status: Stable

Origem e distribuição

Fonte: shadcn registry / menubar
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/menubar.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Teclado verificado por teste: a barra inteira custa um Tab stop — o segundo Tab sai dela —, ArrowLeft e ArrowRight andam entre os gatilhos, com um menu aberto ir para o lado abre o vizinho diretamente, e Escape fecha deixando o foco no gatilho. Leitor de tela verificado por teste: a barra tem papel menubar, cada gatilho é um menuitem com aria-haspopup="menu" e aria-expanded acompanhando o estado, o vocabulário do DropdownMenu chega intacto (aria-checked em itens de checkbox, aria-haspopup em gatilho de submenu) e um item desabilitado continua anunciado por aria-disabled. Touch verificado em navegador com emulação de toque em viewport de 375px: gatilhos e itens medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada dos menus mede 0.001s.

Dependências

Pacotes: @base-ui/react
Ícones: check
Construído sobre: Dropdown Menu
Usado por: Nenhum ainda