OPEN-UI

Floating Dock

Bottom navigation dock with magnify-on-hover. Desktop bar at bottom; mobile collapses to hamburger menu.

Install

Use Open-UI CLI or Shadcn CLI to install the component.

Open-UI CLI

Shadcn CLI

Usage

PropDefaultDescriptionType
itemsArray of nav items: title, icon (ReactNode), and href. Rendered in both desktop bar and mobile menu.{ title: string; icon: ReactNode; href: string }[]
desktopClassNameOptional CSS class for the desktop dock container (visible from md breakpoint).string
mobileClassNameOptional CSS class for the mobile dock wrapper (visible below md; wraps the hamburger trigger and expanded menu).string

Related Components