Floating Dock

A macOS-style floating dock with magnetic hover animations and keyboard navigation.

Overview

The FloatingDock component provides a macOS-style dock with magnetic hover effects, spring physics animations, and full keyboard accessibility.

Subcomponents & hooks:

FloatingDock — root component (context provider, mouse/keyboard handling)
FloatingDock.Item — interactive dock item with animated scaling
FloatingDock.Separator — visual divider between item groups
useDock() — advanced hook for custom integrations

orientation

size

intent

styling

shape

elevation

Installation

Usage

Basic

import {
  FloatingDock,
  type DockItemData,
} from '@/components/azemmur/components/floating-dock';

const items: DockItemData[] = [
  {
    title: 'GitHub',
    icon: <IconBrandGithub className="size-full" />,
    href: 'https://github.com',
  },
  {
    title: 'LinkedIn',
    icon: <IconBrandLinkedin className="size-full" />,
    href: 'https://linkedin.com',
  },
];

export default function Example() {
  return (
    <FloatingDock intent="primary" size="md">
      {items.map((item, i) => (
        <FloatingDock.Item
          key={item.title}
          item={item}
          tabIndex={i === 0 ? 0 : -1}
        />
      ))}
    </FloatingDock>
  );
}

With Separator

<FloatingDock orientation="horizontal" styling="ghost">
  {mainItems.map((item, i) => (
    <FloatingDock.Item
      key={item.title}
      item={item}
      tabIndex={i === 0 ? 0 : -1}
    />
  ))}
  <FloatingDock.Separator />
  {secondaryItems.map((item) => (
    <FloatingDock.Item key={item.title} item={item} tabIndex={-1} />
  ))}
</FloatingDock>

Using `useDock()` for custom items

import { useDock } from '@/components/azemmur/components/floating-dock/dock-context';

function CustomDockItem() {
  const { mousePosition, isVertical, intent, styling } = useDock();
  // Build custom dock item with context values
  return <div>Custom content</div>;
}

API Reference

`FloatingDock` (root)

Prop	Type	Default
`orientation?`	enum	"vertical"
`size?`	enum	"md"
`intent?`	enum	"primary"
`styling?`	enum	"solid"
`shape?`	enum	"pill"
`elevation?`	enum	"raised"
`className?`	string	-
`...props?`	ComponentProps<"div">	-

`FloatingDock.Item`

Azemmur API Reference - Button Primitive

Prop	Type	Default
`item`	DockItemData	-
`tabIndex?`	number	0
`className?`	string	-
`...props?`	ComponentProps<"a">	-

`FloatingDock.Separator`

Prop	Type	Default
`className?`	string	-
`...props?`	ComponentProps<"div">	-

`DockItemData`

Prop	Type	Default
`title`	string	-
`icon`	React.ReactNode	-
`href`	string	-
`obfuscated?`	boolean	false

`useDock()`

Hook to access dock context values for building custom dock items.

Prop	Type	Default
`mousePosition?`	MotionValue<number>	-
`isVertical?`	boolean	-
`orientation?`	"vertical" \| "horizontal"	-
`size?`	"sm" \| "md" \| "lg"	-
`intent?`	"primary" \| "accent" \| "secondary" \| "success" \| "info" \| "warning" \| "error"	-
`styling?`	"solid" \| "outline" \| "ghost" \| "link"	-
`shape?`	"rounded" \| "pill" \| "sharp"	-
`elevation?`	"raised" \| "floating"	-

Keyboard navigation adapts to the dock orientation:

Vertical orientation:

Key	Action
`Arrow Down`	Move focus to the next item
`Arrow Up`	Move focus to the previous item

Horizontal orientation:

Key	Action
`Arrow Right`	Move focus to the next item
`Arrow Left`	Move focus to the previous item

Common keys:

Key	Action
`Enter` / `Space`	Activate the focused link
`Tab`	Move focus into/out of the dock

Features

Magnetic hover effect — Icons smoothly scale based on mouse proximity
Spring animations — Natural feeling physics-based transitions
Keyboard navigation — Full arrow key support with focus management
Accessibility — Proper ARIA labels and keyboard focus indicators
Link obfuscation — Optional base64-encoded hrefs for spam protection
Variant system — Full support for intent, styling, shape, and elevation

Credits

Inspired by macOS dock interactions
Built with Motion for animations