Como ele é
Lembra um cartão branco que acompanha o cursor pela barra do site. No topo ficam a marca, os itens do menu e um botão escuro de chamada. Ao parar sobre um item, um painel de cantos arredondados aparece logo abaixo, com uma pequena seta apontando para ele. Ao seguir para o item vizinho, o mesmo painel estica ou encolhe e desliza até a nova posição, enquanto o conteúdo antigo sai e o novo entra vindo do lado para onde você foi. Os links surgem em cascata, cada um com ícone, título e descrição curta, e alguns painéis trazem um cartão de destaque em gradiente, colorido ou escuro.
Você pode estar procurando isto se pediu algo assim
- menu do topo que abre um painel grande quando passo o mouse
- mega menu com ícones e descrição para site de serviços
- aquele menu de site de startup em que a caixinha desliza entre os itens
- dropdown que muda de tamanho suavemente ao trocar de opção
- cabeçalho de SaaS com submenus bonitos e acessíveis
- menu de navegação com um cartão de destaque dentro do submenu
- menu que não fecha sem querer quando o mouse escapa um pouco
Também chamado de
- mega menu
- morphing dropdown
- menu suspenso animado
- dropdown animado
- navigation menu
- menu de cabeçalho
- shared dropdown
Quando usar
- Cabeçalho de site institucional ou de SaaS com muitos serviços
- Menu de produtos com categorias, ícones e descrições curtas
- Sites que querem destacar um case ou uma oferta dentro do submenu
- Navegação de desktop que precisa funcionar bem pelo teclado
Quando evitar
- Navegação principal no celular: não há versão em menu hambúrguer, só uma barra mais compacta
- Sites com dois ou três links diretos, em que um submenu só atrasa o clique
Como pedir para a sua IA
Crie um mega menu no cabeçalho do meu site com um único painel suspenso que muda de tamanho e posição ao trocar de item, seta que desliza, atraso de intenção no hover, navegação completa pelo teclado com Esc para fechar e sem animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Bonde
Bonde fecha sem querer quando o mouse escapa do painel?
Não costuma fechar. Bonde usa intenção de hover: espera 120 milissegundos para abrir, 70 para trocar de item e dá 280 de tolerância antes de fechar quando o cursor sai da área. Os três tempos são props, e um clique logo depois de abrir pelo hover não fecha o painel por engano.
Bonde é acessível por teclado e com menos movimento?
É. Em Bonde, setas laterais, Home e End passam entre os itens, a seta para baixo ou Tab entram no painel, as setas verticais percorrem os links e Esc fecha, devolvendo o foco ao item. Os botões usam aria-expanded e aria-controls. Com a preferência de reduzir movimento, o painel troca de tamanho e posição sem animação.
Bonde funciona no celular?
Funciona com toque: tocar num item abre o painel e tocar fora fecha, já que o hover é ignorado em telas de toque. Em áreas estreitas, Bonde esconde o nome da marca e o botão de chamada e compacta os itens, mas não vira menu hambúrguer; para celular, peça à IA uma versão em gaveta.
