Ravox KitNavegação
Barra de menu
Arquivo, Editar, Ver: a barra de menu de aplicativo, com o teclado completo da WAI-ARIA. Com um menu aberto, as setas e o mouse passam direto para o vizinho. Itens com atalho, caixas de marcar, grupo de opções e submenu.
Última ação: Nada ainda: abra um menu (ou Tab e ↓). · grade ligada · zoom 100%
Ajustes
Exemplos
Caixas e opções
Submenu em dois níveis
Instalação
O shadcn cria components/ui/barra-menu.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/barra-menu.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| aria-label | string | "Menu do aplicativo" | Nome da barra para leitores de tela (BarraMenu). |
| rotulo | ReactNode | — | O título na barra, como Arquivo e Editar (BarraMenuMenu), ou o texto do item que abre outro menu ao lado (BarraMenuSub). Os filhos são os itens do menu. |
| aoEscolher | () => void | — | Clique, Enter ou Espaço no item; o menu fecha e o foco volta para a barra (BarraMenuItem). |
| atalho | string | — | Texto do atalho à direita, como "⌘S" (só mostra; quem liga a tecla é o app). |
| icone / destrutivo / desabilitado / href | ReactNode / boolean / boolean / string | — | Ícone no espaço da esquerda, tom de perigo, item inativo e item que é link (BarraMenuItem). |
| marcado / aoMudar | boolean / (marcado) => void | — | Item de marcar e desmarcar (BarraMenuCaixa). |
| valor / aoMudar | string / (valor) => void | — | Grupo em que só uma opção fica marcada (BarraMenuOpcoes com BarraMenuOpcao valor). |
| BarraMenuSeparador / BarraMenuRotulo | ComponentProps<"div"> | — | Linha entre blocos e título de seção dentro do menu. |