Ravox KitNavegação
Menu de navegação
O menu do topo do site: itens com painéis ricos que abrem no hover ou no clique, um destaque que desliza atrás do item e teclado da WAI-ARIA. Quando falta espaço, vira um botão de menu com as seções abrindo e fechando.
Ajustes
Alinhar
Colunas do painel
Exemplos
Só links, com a página atual
Painel com destaque
Com o Link do Next
Instalação
O shadcn cria components/ui/menu-navegacao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/menu-navegacao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| alinhar | "inicio" | "centro" | "fim" | "inicio" | Onde os itens ficam na largura do menu (MenuNavegacao). Dê largura a ele (flex-1 ou w-full): a troca para o botão de menu mede o próprio menu. |
| rotulo | string | "Principal" | Nome do <nav> para leitores de tela (MenuNavegacao). |
| rotulo + children | ReactNode | — | Item com painel: o texto do botão e o conteúdo do painel (MenuNavegacaoItem). |
| href / asChild / atual | string / boolean / boolean | — | Item simples, sem painel: link direto ou o <Link> do Next como filho; atual marca aria-current (MenuNavegacaoItem). |
| colunas | 1 | 2 | 3 | 2 | Grade de links do painel; vira uma coluna na versão estreita (MenuNavegacaoGrade). |
| titulo / descricao / icone | ReactNode | — | O link rico do painel (MenuNavegacaoLink). Aceita href, atual e asChild. |