# Passarela Barra de ícones translúcida em que cada ícone cresce quando o mouse se aproxima, como no Mac. > Passarela é um componente do THM Componentes que recria a barra de aplicativos do macOS: ícones redondos numa faixa translúcida e desfocada crescem conforme o mouse se aproxima, e os vizinhos crescem um pouco menos, formando uma onda. Funciona na horizontal ou na vertical e serve para navegação de portfólio e atalhos de app. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/passarela/ ## Como ele é Lembra a barra de aplicativos do Mac, aquela no pé da tela. Os ícones ficam numa faixa de cantos arredondados, com borda fina e fundo translúcido que desfoca o que está atrás. Em repouso, cada ícone mede 40 pixels; quando o mouse passa, o mais próximo cresce até 100 pixels e os vizinhos crescem menos, conforme a distância, até 140 pixels do centro, o que cria uma onda que acompanha o cursor. A mudança de tamanho leva 200 milissegundos, com freada suave. Separadores finos dividem grupos, e a barra pode ficar em pé, na lateral. Quando o mouse sai, tudo volta ao tamanho inicial. ## Você pode estar procurando isto se pediu algo assim - “menu com ícones que crescem quando passo o mouse” - “barra de ícones igual à do Mac no meu site” - “atalhos do portfólio que aumentam perto do cursor” - “aquela barra do macOS com efeito de lupa nos ícones” - “menu flutuante de ícones no rodapé da página” - “navegação com ícones redondos que fazem onda no hover” - “deixar os links das redes sociais mais divertidos” ## Também chamado de barra de aplicativos, dock estilo macOS, macOS-style dock, barra de ícones, icon magnification, dock menu, menu estilo Mac ## Quando usar - Navegação de portfólio pessoal ou de estúdio - Atalhos fixos para as principais áreas de um app web - Links para redes sociais e contato no rodapé - Barra de ferramentas de um editor ou painel com poucos ícones ## Quando evitar - Menus com muitos itens ou sem rótulo, em que só o ícone não diz para onde a pessoa vai - Sites acessados principalmente no celular, em que não há cursor para ampliar os ícones ## Como pedir para a sua IA ```text Crie um dock estilo macOS fixo no rodapé do portfólio: ícones redondos que crescem conforme o mouse se aproxima, com rótulo acessível em cada link, foco visível no teclado, tamanho normal no celular e versão sem ampliação para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Passarela ### Passarela funciona no celular? Funciona como uma barra comum. Passarela amplia os ícones a partir do movimento do mouse, então em telas de toque eles ficam no tamanho de repouso, de 40 pixels, e os links colocados dentro continuam clicáveis com o dedo. No celular, vale manter uma área de toque confortável e rótulos claros. ### Dá para usar Passarela na vertical, na lateral da página? Dá. Com orientation vertical, Passarela empilha os ícones numa coluna de 58 pixels de largura e amplia pela posição vertical do mouse. Um cuidado: o cálculo compara a posição do mouse na página com a do ícone na tela, então numa página rolada a ampliação sai deslocada; peça à IA para usar clientY no lugar de pageY. ### Passarela é acessível por teclado? Passarela em si não cuida disso: cada ícone é uma caixa sem foco, e a ampliação só responde ao mouse. Se você colocar links ou botões dentro de cada DockIcon, eles recebem foco normalmente; peça à IA um aria-label em cada um e um destaque visível no foco, já que o ícone sozinho não diz o destino. ## Componentes relacionados - [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. - [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. - [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. - [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. - [Crachá](https://vibecode.thmtecnologia.com/componentes/cracha/): Fileira de fotos redondas sobrepostas; ao passar o mouse, um balão com nome e cargo surge e balança com o cursor. --- 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.