Dock

macOS-style dock: icons magnify near the pointer. Static sizes for reduced motion; tooltips name each item; the `active` item gets aria-current.

Import

import { Dock } from '@marbleui/ui'

Props

<Dock>

Prop	Type	Default
items *required	`DockItem[]`	`—`
base	`number`	`40`
className	`string`	`—`
max	`number`	`64`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Row of app-style icon buttons that grow as the pointer nears them, each with a tooltip. For ordinary actions use Toolbar; for site navigation, Navbar or Sidebar.

<Dock items={[
  { id: 'home', label: 'Home', icon: <HomeIcon />, onPress: () => navigate('/'), active: true },
  { id: 'mail', label: 'Mail', icon: <MailIcon />, onPress: () => navigate('/mail') },
]} />

Items are buttons, not links, so route from onPress. label is both the accessible name and the tooltip text.
active draws a dot under the icon and sets aria-current="page".
base (40) and max (64) are icon sizes in px. Icons grow upward out of the base + 20 px dock, so leave room above it.
Only the pointer magnifies; keyboard focus doesn’t, and under reduced motion icons stay at base. The wrapper is a nav labelled “Dock”.

Example source · show

import { Dock } from './dock'

const I = ({ d, c }: { d: string; c: number }) => <svg viewBox="0 0 24 24" fill="none" stroke={`var(--chart-${c})`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
const items = [
  { id: 'home', label: 'Home', icon: <I c={1} d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />, active: true },
  { id: 'mail', label: 'Mail', icon: <I c={7} d="M4 4h16v16H4zM4 7l8 6 8-6" />, active: true },
  { id: 'cal', label: 'Calendar', icon: <I c={2} d="M8 2v4M16 2v4M3 10h18M5 4h14v18H5z" /> },
  { id: 'notes', label: 'Notes', icon: <I c={4} d="M14 2H6v20h12V6zM14 2v4h4M8 13h8M8 17h5" /> },
  { id: 'music', label: 'Music', icon: <I c={5} d="M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0M21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0" /> },
  { id: 'settings', label: 'Settings', icon: <I c={6} d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-2.9-1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 3 15H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.2-2.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 9 4.6V4a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.7 1.7 0 0 0 20.4 11H21a2 2 0 1 1 0 4z" /> },
]
export const styles = { Default: () => <div className="flex h-44 items-end pb-4"><Dock items={items} /></div> }

Source: packages/ui/src/dock/dock.tsx

Catalog

Category: navigation
Priority: Extra
Primitive: custom
React Aria: Toolbar
Base UI: Toolbar