Dock Menu
A macOS-style dock menu with magnification on hover.
npx arupui add dock-menu
Preview
Usage
dock-menu.tsx
import { DockMenu } from "@/components/blocks/dock-menu"
<DockMenu
items={[
{ icon: <HomeIcon />, label: "Home", onClick: () => {} },
{ icon: <DocsIcon />, label: "Docs" },
]}
/>Props
| Prop | Type | Default |
|---|---|---|
items | DockMenuItem[] | - |
magnification | number | 56 |
distance | number | 120 |
itemsType:
DockMenuItem[]Default: -magnificationType:
numberDefault: 56distanceType:
numberDefault: 120