Floating Dock
MacOS-style floating dock navigation bar with cursor-aware magnify-on-hover, animated tooltips, responsive mobile menu, and full Framer controls.
Make it with Workshop
Build your own component with AI
Floating Dock is a polished, macOS-style navigation dock for Framer, built to add a tactile, interactive nav experience to any website or prototype. It animates icons based on cursor proximity, creating a smooth magnify-on-hover effect, and surfaces contextual tooltips with spring-driven motion, making navigation feel alive and discoverable. The component is fully responsive, and it swaps to a compact mobile menu with an animated entrance, making it ideal for both desktop hero areas and mobile navigation.
Use cases.
Site navigation for portfolio or product sites that need a premium interactive header.
App or dashboard prototypes that mimic macOS dock behaviour.
Studio landing pages, team pages, and interactive demos where playful navigation boosts engagement.
Design systems and UI kits that want a polished dock pattern ready to drop in.
