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 https://ui.aceternity.com/registry/floating-dock.json

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

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro
Manu was such a pleasure to work with. Talented, communicative and fast. Highly recommend!

Jonathan Barshop

Founder at Barshop Studios

A product by Aceternity
Building in public at @mannupaaji