Circular Dock Menu

Use Circular Dock Menu for a compact set of related actions that can expand from one trigger. Items fan into a radial arc and the menu closes on outside interaction, Escape, or item selection.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion Lucide

npx shadcn@latest add @sona-ui/circular-dock-menu

Basic usage

dock-menu.tsx

import CircularDockMenu from "@/components/ui/circular-dock-menu/circular-dock-menu";
 
const items = [
{ label: "Search", onSelect: () => console.log("Search") },
{ label: "Settings", onSelect: () => console.log("Settings") },
];
 
export function DockMenu() {
return <CircularDockMenu items={items} />;
}

Examples

Use controlled open state when another control needs to open or close the menu. Keep the item count short so the radial layout remains easy to scan.

Usage


"use client";
 
import {
  BookOpen,
  Clapperboard,
  FileText,
  ImageIcon,
  Music,
} from "lucide-react";
 
import CircularDockMenu from "@/components/ui/circular-dock-menu/circular-dock-menu";
 
const ITEMS = [
  { label: "Document", icon: FileText },
  { label: "Learning", icon: BookOpen },
  { label: "Music", icon: Music },
  { label: "Video", icon: Clapperboard },
  { label: "Image", icon: ImageIcon },
];
 
export default function CircularDockMenuDemo() {
  return <CircularDockMenu items={ITEMS} />;
}

API

Property	Type	Default	Description
`items`	`DockMenuItem[]`	`—`	Items rendered as arc pills when the menu is open.
`open`	`boolean`	`—`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`—`	Called when the menu opens or closes.
`stiffness`	`number`	`420`	Spring stiffness for the open/close animation.
`damping`	`number`	`32`	Spring damping for the open/close animation.
`className`	`string`	`—`	Additional CSS classes for the root container.

Accessibility

The trigger can be reached by keyboard, Escape closes the menu, and focus returns to the trigger after dismissal. Give every item a short, specific label.

Styling

Adjust item content and the motion configuration to match the action group. Reduced-motion preferences remove the radial travel.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.