Pop-out Circle Menu React component
A round button circled by slowly turning text that pops its links out along an arc: a hairline ring opens behind them, icons spring out in a stagger with labels sliding outward, from a corner, an edge or in a full circle.
About the Pop-out Circle Menu component
Pop-out Circle Menu is a small round button that opens into a fan of links. Pressing it turns the plus into a cross, opens a thin ring behind it and springs the icons out along an arc one after another, each with a label that slides outward.
While closed, a line of tiny text turns slowly around the button as an invitation. Placement decides the arc: a quarter circle from any corner, a half circle from the top or bottom edge, or a full circle around the centre.
When to use it
Use it as a floating quick menu on portfolios, landing pages and mobile layouts, as a share or contact launcher, or as a playful centrepiece with the center placement.
Keep it to three to seven items with clear icons; for longer or text-heavy navigation, a burger or overlay menu reads better.
Installation
Add the Pop-out Circle Menu component to your project with the shadcn CLI. It lands in components/pop-out-circle-menu.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/pop-out-circle-menuOr copy the source by hand and install its dependencies:
npm install motion lucide-react clsx tailwind-mergeProps
<PopOutCircleMenu /> accepts 11 props, all optional. It also accepts the usual <nav> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| items | { id: string; label: string; href?: string; icon: React.ReactNode }[] | DEFAULT_ITEMS |
| placement Where the button sits, which decides the arc the items fan across. | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "top" | "bottom" | "center" | "bottom-right" |
| radius Distance from the button's centre to the items' centres. Defaults to 180 from a corner, 150 from an edge, 132 around the centre. | number | — |
| open | boolean | — |
| defaultOpen | boolean | false |
| onOpenChange | (open: boolean) => void | — |
| showLabels | boolean | true |
| showRing | boolean | true |
| orbitText Small circular text that turns around the closed button. | string | false | "Explore ✦ the studio ✦ " |
| onSelect | (item: PopOutMenuItem, event: React.MouseEvent<HTMLElement>) => void | — |
- theme"dark" | "light"Default: "dark"
- items{ id: string; label: string; href?: string; icon: React.ReactNode }[]Default: DEFAULT_ITEMS
- placement
Where the button sits, which decides the arc the items fan across.
"bottom-right" | "bottom-left" | "top-right" | "top-left" | "top" | "bottom" | "center"Default: "bottom-right" - radius
Distance from the button's centre to the items' centres. Defaults to 180 from a corner, 150 from an edge, 132 around the centre.
number - openboolean
- defaultOpenbooleanDefault: false
- onOpenChange(open: boolean) => void
- showLabelsbooleanDefault: true
- showRingbooleanDefault: true
- orbitText
Small circular text that turns around the closed button.
string | falseDefault: "Explore ✦ the studio ✦ " - onSelect(item: PopOutMenuItem, event: React.MouseEvent<HTMLElement>) => void
npm dependencies
Installed for you by the shadcn CLI.
Pop-out Circle Menu FAQ
- Where should I put it?
- Wrap it in an absolutely or fixed positioned element (for example fixed right-8 bottom-8) and set placement to match that corner, so the items fan toward the open space.
- Can items run actions instead of links?
- Yes. Leave out href and the item renders as a button; handle it in onSelect, which receives the item and the click event.
- How do I change the spacing?
- radius sets the distance from the button to the items: 180px from a corner, 150px from an edge and 132px around the centre by default.
- Can I hide the turning text?
- Pass orbitText={false}, or your own string to change it.
