Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Floating Dock

A floating dock mac os style component, acts as a navigation bar.

Open in

Installation

Run the following command

npx shadcn@latest add @aceternity/floating-dock

Props

Floating Dock

Prop NameTypeDescription
items{ title: string; icon: React.ReactNode; href: string }[]Array of items to display in the dock.
desktopClassNamestringOptional class name for the desktop dock.
mobileClassNamestringOptional class name for the mobile dock.

Floating Dock Mobile

Prop NameTypeDescription
items{ title: string; icon: React.ReactNode; href: string }[]Array of items to display in the mobile dock.
classNamestringOptional class name for the mobile dock.

Floating Dock Desktop

Prop NameTypeDescription
items{ title: string; icon: React.ReactNode; href: string }[]Array of items to display in the desktop dock.
classNamestringOptional class name for the desktop dock.

IconContainer Component

Prop NameTypeDescription
mouseXMotionValueMotion value for the mouse X position.
titlestringTitle of the item.
iconReact.ReactNodeIcon to display for the item.
hrefstringURL to navigate to when the item is clicked.

This component is inspired by floating dock on menu on Rauno's website and it's implementation on Build UI.

Build websites faster and 10x better than your competitors with

Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji