Circle Menu

A radial navigation menu that expands in a circular pattern with smooth spring animations and hover effects.

Component preview

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/circle-menu.json"

Install Manually

Install dependencies

npm install motion lucide-react clsx tailwind-merge

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Copy the source code

Copy the code into components/block/circle-menu.tsx

Usage

Code

1import { CircleMenu } from "@/components/block/circle-menu"
2import { Home, User, Settings, Mail, Heart } from "lucide-react"
3
4export function Demo() {
5return (
6  <CircleMenu
7    items={[
8      { label: "Home", icon: <Home size={18} />, href: "/" },
9      { label: "User", icon: <User size={18} />, href: "/profile" },
10      { label: "Settings", icon: <Settings size={18} />, href: "/settings" }
11    ]}
12  />
13)
14}

Props

Prop	Type	Default	Description
items	`{ label, icon, href?, onClick? }[]`	`-`	Array of menu items
openIcon	`React.ReactNode`	`<Menu />`	Icon when closed
closeIcon	`React.ReactNode`	`<X />`	Icon when open