Docs
Floating Dock
Floating Dock
A floating dock component like mac, acts as a navigation bar.
Look at the Bottom Dock
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the Floating Dock code into your project.
API Reference
First Dock
Props
| Prop | Type | Description |
|---|---|---|
| mobileClassName | string | Additional classes for the mobile. |
| desktopClassName | string | Additional classes for the desktop. |
| items | { title: string; icon: React.ReactNode; href: string }[] | The items to display in the dock. |
| animate | boolean | Enables or disables sidebar animations. |
Usage
const links = [
{
title: "Twitter",
icon: (
<Twitter className="size-full text-neutral-500 dark:text-neutral-300" />
),
href: "https://x.com/bean921112",
},
{
title: "GitHub",
icon: (
<Icons.gitHub className="size-full text-neutral-500 dark:text-neutral-300" />
),
href: "https://github.com/buoooou",
},
]
export default function Demo() {
return (
<div className="flex items-center justify-center h-[35rem] w-full">
<FloatingDock
mobileClassName="translate-y-20" // only for demo, remove for production
items={links}
/>
</div>
)
}Second Dock
Props
| Prop | Type | Description |
|---|---|---|
| className | string | Additional classes for the Dock. |
| whileTap | string | VariantLabels | TargetAndTransition |
| ...props | motion.div props | Other props forwarded to the motion div. |
Three Dock
Props
| Prop | Type | Description |
|---|---|---|
| className | string | Additional classes for the Dock. |
| children | React.ReactNode | The content of the Dock. |
| size | number | Dock Icon size. |
| magnification | number | Dock Icon magnification. |
| distance | number | Dock Icon distance. |
| ...props | motion.div props | Other props forwarded to the motion div. |