DocsDock
Dock
A macOS-style magnify-on-hover toolbar menu.
A macOS-style magnify-on-hover toolbar menu.
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 pointMaximum height/width of hovered icon in pixels
Range in pixels within which hover begins magnifying neighboring items
import { Dock } from "nexoreui"
<Dock />| 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.