Library

Dock Navbar

Dock Navbar

macOS-style icon dock with animated active indicator, hover tooltips, and spring-based scale effects. Labels appear under the active icon.

navbardockiconsmacOS

Installation

bash
# Copy dock-navbar.tsx to your project
cp components/ui/dock-navbar.tsx your-project/components/ui/dock-navbar.tsx

How to use

tsx
import { DockNavbar } from "@/components/ui/dock-navbar";
tsx
<DockNavbar
  items={[
    { id: "home", label: "Home", icon: <Home size={20} /> },
    { id: "search", label: "Search", icon: <Search size={20} /> },
    { id: "settings", label: "Settings", icon: <Settings size={20} /> },
  ]}
  defaultActive="home"
/>

Dependencies

framer-motion

Exports

DockNavbar

File

components/ui/dock-navbar.tsx
Preview

Click icons to switch, hover for tooltips

Made with