# Bonde Um menu de cabeçalho em que um único painel desliza e muda de tamanho ao passar de um item para outro. > Bonde é um componente exclusivo do THM Componentes: um menu de cabeçalho com um único painel suspenso que, ao trocar de item, muda de largura, altura e posição, enquanto a seta desliza até o item e o conteúdo entra pela direção do movimento. Tem intenção de hover e teclado completo e serve para sites com muitos serviços. - Categoria: Navegação e scroll - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/bonde/ ## 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 ```text 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. ## Componentes relacionados - [Trevo](https://vibecode.thmtecnologia.com/componentes/trevo/): Uma janela de busca que abre com Ctrl K ou ⌘K para achar páginas e executar ações sem tirar as mãos do teclado. - [Baliza](https://vibecode.thmtecnologia.com/componentes/baliza/): Balões de dica e menus presos ao botão que os abre, que mudam de lado sozinhos quando encostam na borda. - [Fichário](https://vibecode.thmtecnologia.com/componentes/fichario/): Abas em que um fundo arredondado desliza até a opção escolhida, com o conteúdo num maço de cartões. - [Arquipélago](https://vibecode.thmtecnologia.com/componentes/arquipelago/): Uma fileira de abas grudadas como um líquido, em que a aba escolhida se desprende como uma gota. - [Bússola](https://vibecode.thmtecnologia.com/componentes/bussola/): Uma barra de ícones flutuante em que os ícones crescem perto do cursor e se deixam puxar por ele, como ímãs. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.