# Bússola Uma barra de ícones flutuante em que os ícones crescem perto do cursor e se deixam puxar por ele, como ímãs. > Bússola é um componente exclusivo do THM Componentes que cria uma barra de navegação no estilo do dock do macOS: os ícones crescem numa onda conforme o cursor se aproxima, são puxados por ele como ímãs e dão um pulinho no clique, com molas próprias. Funciona pelo teclado e serve para apps, painéis e menus flutuantes. - 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/bussola/ ## Como ele é Pense no dock do Mac com um toque de ímã. Uma barra de vidro fosco, clara e arredondada, flutua perto da base da área com oito ícones de traço fino dentro de quadrados brancos. Quando o cursor se aproxima, os ícones vizinhos crescem numa curva suave, o do centro chega a quase o dobro do tamanho, e o ícone sob o ponteiro se desloca na direção dele, como se fosse atraído. Tudo assenta com molas, sem tranco. O ícone ativo ganha um gradiente de anil para ciano, com um pontinho embaixo, e dá um pequeno salto quando é clicado. Um rótulo escuro aparece acima do ícone em foco. ## Você pode estar procurando isto se pediu algo assim - “menu de ícones que crescem quando passo o mouse, igual ao do Mac” - “barra flutuante embaixo da tela com os atalhos do app” - “ícones que parecem atraídos pelo cursor, tipo ímã” - “dock bonito para a navegação do meu painel” - “aquele efeito da Apple em que o ícone aumenta perto do mouse” - “menu de navegação com efeito de mola que dá vontade de clicar” - “barra de ícones com o nome aparecendo em cima quando passo o mouse” ## Também chamado de dock estilo macOS, ícones que crescem perto do cursor, dock magnification, efeito ímã, magnetic hover, floating dock, barra de navegação flutuante ## Quando usar - Navegação principal de app web ou painel com poucas seções - Menu flutuante de landing page ou de portfólio - Barra de ferramentas de editor, quadro ou ferramenta criativa - Atalhos fixos na base da tela em apresentações de produto ## Quando evitar - Menus com muitos itens ou rótulos longos, que pedem texto sempre visível - Navegação principal de sites pensados para celular, em que não há cursor para ampliar os ícones ## Como pedir para a sua IA ```text Crie um dock de navegação estilo macOS com efeito magnético no rodapé do meu painel: ícones que ampliam pela distância do cursor e são puxados por ele, com animação de mola, rótulos ao passar o mouse, navegação pelas setas do teclado 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 Bússola ### Bússola funciona no celular? Funciona como barra de botões. A ampliação pela distância e o efeito ímã de Bússola dependem do cursor; no celular, tocar num ícone ativa o item, que ganha o destaque em gradiente e o pequeno salto. O prompt do THM Componentes pede à IA um teste em mobile, comparando LCP e INP antes e depois. ### Dá para trocar os ícones e as cores de Bússola? Dá. Cada item de Bússola tem um rótulo e um ícone escolhido entre oito desenhos em SVG que vêm no componente: início, busca, projetos, mensagens, agenda, métricas, nuvem e ajustes. Para outros ícones, peça à IA novos traçados. As cores de destaque, dos ícones e do fundo são props, e o prompt do THM Componentes manda usar os tokens do projeto. ### Bússola funciona pelo teclado e com menos movimento? Sim. Bússola é uma barra de ferramentas com um único ponto de foco: Tab entra, setas, Home e End trocam de ícone, e Enter ou Espaço ativam, com a ampliação e o rótulo acompanhando o foco. Com a preferência de reduzir movimento, os ícones mudam de tamanho sem mola, sem o puxão do ímã e sem o salto ao clicar. ## Componentes relacionados - [Passarela](https://vibecode.thmtecnologia.com/componentes/passarela/): Barra de ícones translúcida em que cada ícone cresce quando o mouse se aproxima, como no Mac. - [Bonde](https://vibecode.thmtecnologia.com/componentes/bonde/): Um menu de cabeçalho em que um único painel desliza e muda de tamanho ao passar de um item para outro. - [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. - [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. - [Atol](https://vibecode.thmtecnologia.com/componentes/atol/): Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro. --- 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.