A floating navbar that scales items on hover, inspired by macos floating dock.
npx shadcn@latest add https://refinery.abhii.me/r/floating-nav.json| Name | Type | Description |
|---|---|---|
| items | NavEntry[] | List of navigation items to display in the floating nav. Each item can be a NavItem (with label, icon, and href) or a NavSeparator (a simple divider). |
| iconSize | number | Base size in pixels for the icon cells. The icons will scale up on hover based on this size. Default is 44px. |
| showTooltip | boolean | Whether to show tooltips with the item labels when hovering over the icons. Default is true. |
| className | string | Additional CSS classes to apply to the floating nav container for custom styling. |
Horizontal mouse position is tracked and each item's distance from the pointer is used to decide how much it should scale. Motion values and springs keep the dock movement smooth instead of snappy. Each item can be a link or a button, and you can keep the hover tooltips on for labels or turn them off when the icons are already clear.