Navigation / COMPONENT

Dock Navigation

A magnifying icon dock with an elastic upward lift, moving labels, and a configurable radial highlight.

Live preview
View the Dock Navigation source on GitHub

How it works

Pointer distance continuously drives each icon’s scale and upward lift. Tooltips follow the same motion, while touch users can activate the links without dragging.

Accessibility

Navigation uses links with accessible labels, keyboard focus styles, and active-page indication. Pointer magnification and lift are reduced when the user prefers reduced motion.

Limitations

Proximity magnification is pointer-driven and does not run on touch. Supply an icon and destination for each link; the component does not generate navigation items.

Features

  • Magnifies nearby icons based on pointer distance, with a springy lift inspired by desktop docks.
  • Moves each tooltip with its icon and keeps a comfortable gap while the icon grows.
  • Accepts custom labels, hrefs, React icons, and an optional active state for every item.
  • Tune the radial glow color, opacity, and blur, or disable it with glow={false}.
  • Apply custom classes to the dock, each link, and each icon surface.
  • Supports keyboard focus, tap feedback, external links, and reduced-motion preferences.

Installation

Choose the CLI command or install the component manually.

Package manager
$ npx @istmx/ui add dock-navigation

Copies the install command for your selected package manager.

Dependencies

ReactMotionTailwind CSSclsxtailwind-merge@tabler/icons-react@tabler/icons-react

Usage

Import the component from the file you copied it to, then use it like any other React component.

Usage
import DockNavigation from '@/components/ui/dock-navigation'
import { IconHome, IconUser, IconCode, IconComponents, IconMail } from '@tabler/icons-react'
 
const items = [
  { label: 'Home', href: '/', icon: <IconHome size={19} /> },
  { label: 'About', href: '/about', icon: <IconUser size={19} /> },
  { label: 'Projects', href: '/projects', icon: <IconCode size={19} /> },
  { label: 'Components', href: '/components', icon: <IconComponents size={19} />, active: true },
  { label: 'Contact', href: '/contact', icon: <IconMail size={19} /> },
]
 
<DockNavigation
  items={items}
  label="Main navigation"
  glow={{ color: 'var(--foreground)', opacity: 0.2, blur: 12 }}
  className="mx-auto"
/>

Composition

Composition
DockNavigation
└── Navigation list
    └── Dock item
        ├── Icon surface
        └── Moving tooltip

API reference

itemsDockNavigationItem[]

Required links with label, href, icon (ReactNode), and optional active and external fields.

label?string

Accessible name for the navigation landmark. Defaults to Primary navigation.

className?string

Classes applied to the dock frame.

itemClassName?string

Classes applied to each link hit area.

iconClassName?string

Classes applied to each animated icon surface.

glow?false | DockNavigationGlow

Set false to disable the radial glow; otherwise configure color?, opacity?, and blur?. Defaults to a subtle foreground glow.

The listed props match the current component implementation.

Data attributes

Dock Navigation does not expose custom data attributes.

Examples

Set active on the current item to show its persistent dot and radial highlight. The pointer-proximity spring, upward lift, tooltip spacing, and metallic icon sheen work together to give the dock a responsive desktop-style feel.

Credits & inspiration

Created by Aryan (istmX) for ISTMX. The source-first, copy-and-own philosophy is inspired by shadcn/ui. About the creator