A radial menu for people who learn it. Hold for eight targets, or flick the same way to pick without looking.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/marking-menuPlayground
Press and hold anywhere, or flick
Open
Press and hold anywhere, or flick
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/marking-menu
Accessibility
- The disc is a menu with items in clockwise order.
- The picked command is announced.
- Every command should also exist elsewhere.
Motion
- Press and hold 250 ms, and the disc grows from the pointer in 180 ms.
- Targets fan out 15 ms apart, and the wedge snaps to 45° sectors.
- A flick faster than 0.6 px per ms leaves a trail that fades over 400 ms, then a chip confirms.
- With reduced motion, the disc appears, the wedge jumps, and there is no trail.
Responsive behavior
- A 224 disc on Web and 232 on Mobile. Long press opens it on touch.
Performance
- The disc mounts only while open, and pointer moves are ignored until then.
- The sector updates state only when it changes, not on every move.
- Hold and chip timers are cleared on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import MarkingMenu from @/components/fetaui/marking-menu after installing it. items is required, each with id, label and icon.
- Use up to eight items, clockwise from the top, and keep their order stable because people learn directions.
- children is the surface it opens on, with a minimum height of 320. onPick receives the id.
- Hold 250 ms, right click, press Enter or flick to use it. The Opened chip is built in, and nothing else runs until you handle onPick.
Related
Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.ToolbarComponentA floating tool dock for canvas apps. It holds the current tool on an ink plate and redocks to any edge.CommandComponentA keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.MenubarComponentA persistent row of menus, like a desktop app. The open tab slides between triggers, and holding Alt shows every access key.Detent DialComponentA rotary control that clicks into steps.