Skip to documentation content
|

Dock

A compact action dock with a shared animated active indicator.

dock-demo

Overview

Dock groups a small set of high-frequency destinations or actions. The active pill moves between items using shared-layout motion while item dimensions remain stable.

Installation
npx honestui@latest add dock

Usage

 
import { Dock, DockItem, DockSeparator } from "@/components/animated/dock"

<Dock>
  <DockItem active onClick={openDashboard} aria-label="Dashboard"><Home /></DockItem>
  <DockSeparator />
  <DockItem onClick={openPreferences} aria-label="Preferences"><Settings /></DockItem>
</Dock>

Accessibility

Items with onClick render as buttons and expose aria-pressed for the active state. Icon-only items require an aria-label. Keep the dock to a short, recognizable action set.

API Reference
PropTypeDefaultDescription
sizenumber44Width and height of each Dock Item in pixels.
activeboolean–Shows the shared active indicator.
onClick() => void–Renders the item as a button and handles activation.
aria-labelstring–Accessible name for an icon-only item.