Floating Dock

A floating dock navigation component with smooth hover animations. Features desktop and mobile variants with interactive icon scaling.

Open in

Installation

npm install motion/react lucide-react react

pnpm install motion/react lucide-react react

yarn add motion/react lucide-react react

bun add motion/react lucide-react react

'use client';

import { FloatingDock } from '@/components/ui/floating-dock';
import {
  Github,
  Home,
  Layers,
  RefreshCw,
  Terminal,
  Twitter,
} from 'lucide-react';

export default function FloatingDockDemo() {
  const links = [
    {
      title: 'Home',
      icon: (
        <Home className="h-full w-full text-neutral-500 dark:text-neutral-300" />
      ),
      href: '#',
    },
    {
      title: 'Products',
      icon: (
        <Terminal className="h-full w-full text-neutral-500 dark:text-neutral-300" />
      ),
      href: '#',
    },
    {
      title: 'Components',
      icon: (
        <Layers className="h-full w-full text-neutral-500 dark:text-neutral-300" />
      ),
      href: '#',
    },
    {
      title: 'MVPBlocks',
      icon: (
        <img
          src="https://i.postimg.cc/j5dW4vFd/Mvpblocks.webp"
          width={20}
          height={20}
          alt="MVPBlocks Logo"
          className="rounded-full"
        />
      ),
      href: '#',
    },
    {
      title: 'Changelog',
      icon: (
        <RefreshCw className="h-full w-full text-neutral-500 dark:text-neutral-300" />
      ),
      href: '#',
    },
    {
      title: 'Twitter',
      icon: (
        <Twitter className="h-full w-full text-neutral-500 dark:text-neutral-300" />
      ),
      href: '#',
    },
    {
      title: 'GitHub',
      icon: (
        <Github className="h-full w-full text-neutral-500 dark:text-neutral-300" />
      ),
      href: '#',
    },
  ];
  return (
    <div className="flex h-[35rem] w-full items-center justify-center">
      <FloatingDock mobileClassName="translate-y-20" items={links} />
    </div>
  );
}

'use client';import { FloatingDock } from '@/components/ui/floating-dock';import {  Github,  Home,  Layers,  RefreshCw,  Terminal,  Twitter,} from 'lucide-react';export default function FloatingDockDemo() {  const links = [    {      title: 'Home',      icon: (        <Home className="h-full w-full text-neutral-500 dark:text-neutral-300" />      ),      href: '#',    },    {      title: 'Products',      icon: (        <Terminal className="h-full w-full text-neutral-500 dark:text-neutral-300" />      ),      href: '#',    },    {      title: 'Components',      icon: (        <Layers className="h-full w-full text-neutral-500 dark:text-neutral-300" />      ),      href: '#',    },    {      title: 'MVPBlocks',      icon: (        <img          src="https://i.postimg.cc/j5dW4vFd/Mvpblocks.webp"          width={20}          height={20}          alt="MVPBlocks Logo"          className="rounded-full"        />      ),      href: '#',    },    {      title: 'Changelog',      icon: (        <RefreshCw className="h-full w-full text-neutral-500 dark:text-neutral-300" />      ),      href: '#',    },    {      title: 'Twitter',      icon: (        <Twitter className="h-full w-full text-neutral-500 dark:text-neutral-300" />      ),      href: '#',    },    {      title: 'GitHub',      icon: (        <Github className="h-full w-full text-neutral-500 dark:text-neutral-300" />      ),      href: '#',    },  ];  return (    <div className="flex h-[35rem] w-full items-center justify-center">      <FloatingDock mobileClassName="translate-y-20" items={links} />    </div>  );}

Usage

import { FloatingDock } from "@/components/ui/floating-dock";
import { Home, Github, Twitter } from "lucide-react";

export default function MyComponent() {
  const links = [
    {
      title: "Home",
      icon: <Home className="h-full w-full" />,
      href: "/",
    },
    {
      title: "GitHub",
      icon: <Github className="h-full w-full" />,
      href: "https://github.com",
    },
    {
      title: "Twitter",
      icon: <Twitter className="h-full w-full" />,
      href: "https://twitter.com",
    },
  ];

  return (
    <div className="flex items-center justify-center h-screen">
      <FloatingDock items={links} />
    </div>
  );
}

Features

🎯 Interactive Icons: Icons scale smoothly on hover with spring animations
📱 Responsive: Separate desktop and mobile layouts
🎨 Smooth Animations: Powered by motion/react for fluid transitions
🌙 Dark Mode: Seamlessly works with light and dark themes
🖱️ Hover Effects: Icons expand based on mouse position
📱 Mobile Menu: Collapsible menu for mobile devices

Positioning

The component supports custom positioning via className props:

<FloatingDock
  desktopClassName="fixed bottom-4 left-1/2 -translate-x-1/2"
  mobileClassName="fixed bottom-4 right-4"
  items={links}
/>

Note:

Desktop navbar is better positioned at the bottom
Mobile navbar is better positioned at bottom right

Customization

You can customize the dock by:

Icons: Use any React node as icons (lucide-react, custom SVGs, images)
Colors: Modify Tailwind classes for background and text colors
Sizes: Adjust the dock height and icon sizes via className
Animations: The spring animations are configurable in the component

Examples

Custom Icons with Images

const links = [
  {
    title: "Logo",
    icon: (
      <img
        src="/logo.png"
        width={20}
        height={20}
        alt="Logo"
        className="rounded-full"
      />
    ),
    href: "/",
  },
];

Fixed Position Dock

<FloatingDock
  desktopClassName="fixed bottom-8 left-1/2 -translate-x-1/2 z-50"
  items={links}
/>