Installation
Usage
import DockNavbar from "@/components/veltrixui/dock-navbar";
import { Home, Compass, Layers3, Sparkles } from "lucide-react";
const items = [
{ label: "Home", href: "/", icon: Home },
{ label: "Explore", href: "/explore", icon: Compass },
{ label: "Templates", href: "/templates", icon: Layers3 },
{ label: "Resources", href: "/resources", icon: Sparkles },
];
export default function App() {
return (
<DockNavbar
brand="Acme"
items={items}
activeHref="/explore"
actionLabel="Get started"
actionHref="/signup"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "veltrix" | Brand label shown at the start of the dock |
items | DockNavbarItem[] | Default links | Navigation links with a label, href, and Lucide icon |
activeHref | string | First item | URL used to highlight the active item |
actionLabel | string | "Get started" | Optional trailing call-to-action label |
actionHref | string | "#get-started" | Call-to-action destination |
className | string | - | Additional classes for the dock container |
Each item accepts label, href, and icon (a Lucide icon component).
Features
- Dock magnification: the hovered or focused icon grows, with neighboring icons receiving a smaller lift.
- Spring motion: uses Motion for a soft, responsive scale and lift.
- Active location: a moving indicator marks the active destination.
- Flexible navigation: provide your own links, icons, brand, and CTA.
- Responsive layout: labels stay available to assistive technology while the compact icon dock fits smaller screens.
- Theme aware: uses semantic foreground, border, and surface colors for light and dark themes.
- Reduced motion: magnification and lift are disabled when the user prefers reduced motion.