The Dock component brings the classic macOS navigation experience to the web. Built entirely with Framer Motion's useMotionValue and useTransform hooks, it tracks the user's cursor distance to smoothly scale up items and gently push adjacent items away. It's perfect for fixed global navigation or sticky sub-menus.
Live Preview
DockItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Tooltip text to display above the item on hover. |
href | string | — | If provided, renders the item as an anchor tag `<a>`. |
onClick | () => void | — | Click handler function. |
children | ReactNode | Required | The icon or content of the item. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { Dock } from "@/components/creative/dock";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { Dock } from "@/components/creative/dock";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<Dock
variant{/* value */}
backgroundColor="example"
>
<div>Content goes here</div>
</Dock>
</div>
);
}