On This Page
A macOS-style magnify-on-hover toolbar menu with customizable items and magnification settings.
standard dockBottom navigation panels in dashboards, portfolio pages, product previewshigh magnificationCreative pages where the magnification effect is the focal interactive point| Prop | Type | Default | Description |
|---|---|---|---|
| items* | { icon: React.ReactNode; label: string; onClick?: () => void }[] | — | Array of interactive action items rendered inside the dock list. |
| className | string | — | Additional custom class names for the container wrapper. |
| magnification | number | 60 | Maximum width/height of the hovered icon in pixels. |
| distance | number | 140 | Hover active boundary distance threshold in pixels. |
<div> element that triggers key callbacks and displays clean outlines.