21 CSS Circular & Radial Menu Designs
A CSS circular menu arranges navigation items around a circle, ring, or arc instead of a flat row. These 21 hand-coded designs are ready-to-ship radial action menus, compass nav, and skeumorphic widgets you can drop into a project today — copy the markup, point items at your routes, and ship.
01 / 21
Mission Hub
Pure CSS 
A 5-segment half-wheel command surface with curved SVG labels riding the outer rim, hairline wedge dividers, and a context-aware sub-toolbar that swaps icons based on the selected wedge.
02 / 21
Service Orbit
Pure CSS 
Six service satellites orbit a central disc with an animated pointer that snaps to the active selection.
03 / 21
Tactile Dial
Pure CSS 
A brushed-steel rotary dial flanked by 5 icons arranged on a downward arc.
04 / 21
Fan Reveal
Pure CSS 
Six wedges of a 6-color pie that fan open from a closed stack on first paint with a staggered "deal the cards" reveal — each wedge rotates from 0° to its 60° slot with a per-wedge delay.
05 / 21
Petal Fan
Pure CSS 
Six action buttons fan out across a 180° upper arc from a central FAB on hover, each with a staggered scale-in.
06 / 21
Full Circle Wheel
Pure CSS 
Eight items evenly distributed around a 360° ring, all visible at rest.
07 / 21
Pie Slice Selector
Pure CSS 
Four pie slices, each a labelled clickable wedge.
08 / 21
Donut Sectors
Pure CSS 
A 6-sector SVG donut with curved labels following each arc via textPath.
09 / 21
Half-Donut Speed Dial
Pure CSS 
A bottom-anchored half-arc FAB that fans 5 actions upward in a 180° spread.
10 / 21
Glass Dome
Pure CSS 
A glass hemisphere with backdrop-blur and an inner highlight; menu items orbit along the dome edge.
11 / 21
Holographic Dome
Pure CSS 
A translucent dome with an iridescent rim that rotates continuously via @property-animated conic gradient.
12 / 21
Single Satellite Orbit
Pure CSS 
One satellite continuously orbits the central FAB.
13 / 21
Solar System
Pure CSS 
A central "sun" + 4 "planets" at decreasing orbit radii, each labelled, each orbiting at a different speed (Kepler-style — closer = faster).
14 / 21
Hexagonal Honeycomb
Pure CSS 
Six hexagonal items arranged around a central hex via real geometry (clip-path polygon).
15 / 21
Rotating Triangle Trio
Pure CSS 
Three triangle items rotate together in a trio formation.
17 / 21
Compass Rose
Pure CSS 
A nautical compass rose with N/E/S/W labels and a needle that points at the active direction.
19 / 21
Black Hole
Pure CSS 
Items orbit a glowing accretion-disk singularity at all times.
20 / 21
Chronometer
Pure CSS 
An analog watch face with menu items at hour positions.
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is a CSS circular or radial menu?
A circular menu — also called a radial menu or pie menu — is a navigation pattern where items are arranged around a circle, dome, ring, or orbit instead of a flat horizontal or vertical list. Common variants include the floating-action-button speed-dial, full pie and donut wheels, satellite-orbit menus, and dome-shaped containers. They're particularly effective for mobile interfaces and any UI where space is limited.
How do I build a radial menu in pure CSS?
A radial menu is just a circular menu built without JavaScript. Place the items in a container, give each one a CSS custom property for its angle, and use transform: rotate(var(--a)) translate(RADIUS) rotate(calc(var(--a) * -1)) to fan them around the centre. Add a :checked checkbox or :hover trigger to open and close the fan. Every radial menu demo in this gallery uses this CSS-only technique — copy the HTML and CSS straight from the code panel.
How do you position items in a circle with pure CSS?
Use trigonometry baked into transforms. Set a CSS custom property --a (the angle) on each child and apply transform: rotate(var(--a)) translate(RADIUS) rotate(calc(var(--a) * -1)). The first rotate orients the item around the center, translate pushes it outward by the radius, and the second counter-rotate keeps the item upright. No JavaScript needed — every demo in this gallery uses this pattern.
How do you add curved text along a donut sector?
Use SVG with a hidden <path> inside <defs> that traces the arc you want the text to follow, then a <text><textPath href="#path-id">YOUR LABEL</textPath></text>. The text-anchor="middle" and startOffset="50%" attributes center the label along the arc. The Donut Sectors demo (#04) uses exactly this pattern with one path per sector.
Are these circular menus accessible?
Yes. Each demo uses real semantic <a> elements with aria-label on icon-only items, visible focus states, and keyboard tab order that follows the visual arrangement. Continuous animations (orbital spins, conic rotations, vinyl spin) honour the prefers-reduced-motion media query — animations stop and items show in their static position for users who request reduced motion.
Do circular menus work on touch devices?
Yes, with a caveat: hover-triggered fan-outs (Petal Fan, Iris Aperture) need a tap-to-toggle pattern on touch, which is handled by the :checked checkbox state in demos that include one (Petal Fan, Half-Donut Speed Dial). The always-visible variants (Full Circle Wheel, Pie Selector, Donut Sectors, Compass, Chronometer, Solar System, Black Hole) work identically on touch and desktop.
Can I use these circular menus in any framework?
Yes. Each demo is plain HTML and CSS (no JavaScript) with no dependencies. Drop the markup into React (with className), Vue, Svelte, Astro or static HTML — the styles work as-is. The CSS-variable-driven angles mean adding more items is just changing the --a values. MIT licensed.
Related collections
26 CSS Accordions — Vertical & Horizontal
26
26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.
accordion vertical accordion horizontal accordion
Responsive
22 CSS Breadcrumbs
22
22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.
breadcrumbs navigation css-only
Responsive
6 CSS Mega Menus & Dropdown Menus
6
6 hand-coded CSS mega-menu and dropdown layouts — luxury editorial fashion, cyberpunk terminal panel, biophilic architecture studio, Swiss-grid department store, precision outdoor gear finder, and flash-sale command center. Hover + click/tap. Copy-paste ready, accessible, mobile-friendly.
mega menu dropdown menu navigation
Responsive