Ravox KitSobreposição

Menu

Menu suspenso com itens, ícones, atalhos, grupos com título, itens de marcar e de escolha única, submenu e item destrutivo. Teclado completo do padrão WAI-ARIA, com digitar para pular, e abre na camada de cima: nenhum overflow corta.

Ajustes

Lado
Alinhamento

Exemplos

Ações de um arquivo

Proposta — Clínica Aurora.pdf

Marcar colunas

Escolha única

Instalação

O shadcn cria components/ui/menu.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/menu.json

Opções

OpçãoTipoPadrãoO que faz
<Menu aberto padrao aoMudar>boolean / boolean / (aberto) => void—A raiz. Controlado com aberto + aoMudar, ou solto com padrao.
<MenuGatilho asChild>booleanfalseO botão que abre. Com asChild, passa o comportamento para o filho (ex.: <Botao>).
<MenuConteudo lado alinhamento vao>"baixo" | "cima" | "direita" | "esquerda" / "inicio" | "centro" | "fim" / number"baixo" / "inicio" / 6A caixa do menu. Vira de lado quando falta espaço; no mínimo da largura do gatilho.
<MenuItem icone atalho destrutivo aoEscolher>ReactNode / string / boolean / (e) => void—Um item. aoEscolher roda no clique, Enter ou Espaço; e.preventDefault() mantém o menu aberto.
<MenuMarcavel marcado padrao aoMarcar>boolean / boolean / (marcado) => void—Item de marcar (menuitemcheckbox). Fica aberto ao marcar; fecharAoMarcar muda isso.
<MenuRadio valor padrao aoTrocar rotulo>string / string / (valor) => void / ReactNode—Grupo de escolha única, com <MenuRadioItem valor>.
<MenuGrupo rotulo>ReactNode—Junta itens; o rótulo aparece em cima e nomeia o grupo para leitores de tela.
<MenuSub> + <MenuSubGatilho> + <MenuSubConteudo>——Submenu: abre no hover, no clique ou na seta →; ← e Esc voltam.
<MenuSeparador> / <MenuRotulo>——Linha entre blocos e título solto.
desabilitado / textoboolean / string—Em qualquer item: pular o item, e o texto usado no digitar-para-pular quando o filho não é texto puro.