Nexus floating dock — React Component

Bottom-centered macOS-style dock with pointer-driven magnification, neighbor scaling, glass pill chrome, tooltips, and a touch-friendly expandable mobile menu.

Navbarsspringhovernavigationmotiondockglasstooltip

Nexus floating dock

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

desktopClassName

Extra class names for desktop dock wrapper.

mobileClassName

Extra class names for mobile dock wrapper.

Generated JSX

Copy this into your page.

<FloatingDock
  desktopClassName=""
  mobileClassName=""
/>

Animation effects

springhover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Nexus floating dock

The Floating Dock is a macOS-style icon bar with magnification spring physics that scales icons based on cursor proximity. As the cursor approaches an icon, it magnifies using Framer Motion spring interpolation, while adjacent icons scale proportionally — the same effect Apple uses in macOS. The dock floats above page content with glass morphism styling. Use it in product demos to showcase a polished navigation metaphor, or as actual application navigation.

Common use cases

App navigation bars
macOS-style product demos
Portfolio and creative portfolio navigation
Interactive landing page elements

Installation