Navigation Dock
Nav Dock recreates the familiar macOS-style dock interaction with smooth icon magnification based on cursor proximity. As users move across the dock, nearby items scale up naturally using distance-based interpolation and damping for fluid motion.
Each dock item supports an image, label tooltip, and external or internal link, making it perfect for navigation bars, feature menus, or app-style interfaces. The dock panel expands slightly on hover, revealing labels and improving visual focus.
You can fully customize the number of items, icon size, magnification strength, interaction distance, spacing, background blur, border radius, and shadow styling. The component is lightweight, responsive, and works smoothly with mouse-based interactions on desktop layouts.
Key Features
Distance-based icon magnification on hoverSmooth animated scaling with dampingTooltip labels for each dock itemClickable items with link supportConfigurable number of items up to sixAdjustable icon size, spacing, and magnificationDock panel expands on hoverCustom background blur, border radius, and shadow styling
Use Cases
Primary site navigationApp-style dashboardsLanding page feature menusCreative portfolio navigationWeb app launchers
Best Practices / Tips
Use square icons for consistent scaling behaviorKeep magnification between 1.5 and 2 for natural motionLimit item count for cleaner visual focusIncrease panel height slightly if using long labels
What’s Included
One Nav Dock componentUp to six customizable dock itemsHover-based magnification interactionTooltip label systemFull visual and motion controls
Who It’s For
Framer designers building interactive navigationProduct and web app interfacesCreative portfolios and experimental layoutsNo-code builders creating desktop-like UI experiences
Plaiter
