Installation

Usage

import { DockNav, type DockNavItem } from '@/components/sora-ui/effects/dock-nav';

const items: DockNavItem[] = [
  {
    label: 'Notion',
    href: 'https://notion.so',
    iconSrc: '/icons/notion.png',
    alt: 'Notion app icon',
  },
  {
    label: 'Figma',
    href: 'https://figma.com',
    icon: <FigmaIcon className="size-full" />,
  },
];

export default function Page() {
  return <DockNav items={items} className="max-w-4xl" />;
}

Props

DockNavItem

When to Use

Use DockNav for creative portfolio navigation, desktop-focused admin toolbars, or showcase pages where a compact icon bar with animated expansion fits the visual language. Keep the item count between 4 and 8 — fewer items don't justify the layout, and more items crowd the expansion effect.

For primary site navigation that needs to be accessible on mobile, use a standard header or sidebar instead.

Accessibility

Each item renders as an <a> and uses its label as the visible tooltip and accessible name. Image icons get the accessible label from the alt prop — always supply it. The expansion animation is Motion-driven; when prefers-reduced-motion: reduce is set, useReducedMotion() collapses transitions to duration: 0 — item widths and the tooltip still change state, just instantly instead of animating.