# Bússola A floating icon bar where icons grow as the cursor comes close and get pulled toward it like magnets. > Bússola is an exclusive THM Componentes component that builds a navigation bar in the style of the macOS dock: icons grow in a smooth wave as the cursor approaches, get pulled toward it like magnets and give a small hop on click, driven by custom springs. It works with a keyboard and suits apps, dashboards and floating menus. - Category: Navigation and scroll - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/bussola/ ## What it looks like Think of the Mac dock with a touch of magnetism. A light, rounded frosted glass bar floats near the bottom of the area with eight thin-line icons inside white squares. As the cursor approaches, neighboring icons grow along a smooth curve, the one in the middle reaching almost twice its size, and the icon under the pointer shifts toward it as if attracted. Everything settles on springs, with no jolts. The active icon turns into an indigo to cyan gradient with a small dot below, and it gives a little hop when clicked. A dark label appears above the focused icon. ## You may be looking for this if you asked for something like - “a menu with icons that grow when I hover, like the Mac dock” - “a floating bar at the bottom of the screen with my app shortcuts” - “icons that seem attracted to the cursor, like magnets” - “a nice dock for my dashboard navigation” - “that Apple effect where an icon gets bigger near the mouse” - “a springy navigation menu that makes people want to click” - “an icon bar that shows each name above the icon on hover” ## Also known as macOS dock, icons that grow on hover, dock magnification, magnetic hover, floating dock, magnet effect, floating navigation bar ## When to use - Main navigation for a web app or dashboard with a few sections - A floating menu on a landing page or portfolio - A toolbar for an editor, board or creative tool - Fixed shortcuts at the bottom of the screen in product demos ## When to avoid - Menus with many items or long labels that need text always visible - Main navigation on mobile-first sites, where there is no cursor to magnify the icons ## How to ask your AI ```text Create a macOS-style dock with a magnet effect at the bottom of my dashboard: icons that magnify with cursor distance and get pulled toward it, spring animation, labels on hover, arrow key navigation and no animation for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Bússola ### Does Bússola work on phones? Yes, as a button bar. Distance magnification and the magnet pull in Bússola depend on a cursor, so on phones tapping an icon simply activates the item, which gets the gradient highlight and the small hop. The THM Componentes prompt asks your AI to test on mobile and compare LCP and INP. ### Can I change the icons and colors of Bússola? Yes. Each Bússola item has a label and an icon picked from eight SVG drawings that ship with the component: home, search, projects, messages, calendar, metrics, cloud and settings. For other icons, ask your AI to add new paths. Accent, icon and background colors are props, and the THM Componentes prompt says to use your project tokens. ### Does Bússola support keyboard use and reduced motion? Yes. Bússola is a toolbar with a single tab stop: Tab enters it, arrows, Home and End move between icons, and Enter or Space activate, with magnification and the label following focus. With reduced motion on, icons resize without springs, without the magnet pull and without the hop on click. ## Related components - [Passarela](https://vibecode.thmtecnologia.com/en/components/passarela/): A translucent icon bar where each icon grows as the mouse gets closer, like on a Mac. - [Bonde](https://vibecode.thmtecnologia.com/en/components/bonde/): A header menu where a single panel slides and resizes as you move from one item to the next. - [Trevo](https://vibecode.thmtecnologia.com/en/components/trevo/): A search box that opens with Ctrl K or ⌘K to find pages and run actions without leaving the keyboard. - [Fichário](https://vibecode.thmtecnologia.com/en/components/fichario/): Tabs where a rounded highlight slides to the chosen option, with the content in a stack of cards. - [Atol](https://vibecode.thmtecnologia.com/en/components/atol/): A black pill at the top of the screen that grows and reshapes to show music, a call, an alert or a timer. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).