21 CSS Circular & Radial Menu Designs
Advertisement
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. Pure CSS via :checked + :has(), teal-on-navy cockpit palette.
02 / 21
Service Orbit
Pure CSS 
Six service satellites orbit a central disc with an animated pointer that snaps to the active selection. Click any satellite to swap the centre title and rotate the pointer with a spring overshoot. Pure CSS via :checked + :has() — adapted from a service-business radial nav, simplified to remove its 600+ lines of icon paths and JS pointer animation.
03 / 21
Tactile Dial
Pure CSS 
A brushed-steel rotary dial flanked by 5 icons arranged on a downward arc. Click any icon and the whole dial rotates left or right (-90°/-45°/0°/+45°/+90°) to "point" at the active selection, with a soft white halo around the chosen icon. Pure CSS via :checked + :has() + a CSS custom property for the rotation angle — adapted from a hardware-knob nav, simplified to drop ~10 PNG dependencies and ~100 lines of jQuery.
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. Hover lifts the wedge outward, click locks the selection. Pure CSS keyframe animation, zero JS — adapted from a jQuery-driven menu and rebuilt with proper 60° clip-path geometry.
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. Pure CSS via :hover + transition-delay per child.
06 / 21
Full Circle Wheel
Pure CSS 
Eight items evenly distributed around a 360° ring, all visible at rest. Hover any item to scale it up; the central icon stays anchored. Pure trig via CSS variables.
07 / 21
Pie Slice Selector
Pure CSS 
Four pie slices, each a labelled clickable wedge. Real per-slice hit area via border-radius corners (no overlapping squares) — only the visible pie wedge receives hover and click.
08 / 21
Donut Sectors
Pure CSS 
A 6-sector SVG donut with curved labels following each arc via textPath. On hover the sector pulls outward (split effect), the label brightens, and a subtle scale animation runs. Real hit-tested wedges.
09 / 21
Half-Donut Speed Dial
Pure CSS 
A bottom-anchored half-arc FAB that fans 5 actions upward in a 180° spread. Each item lands on the arc at an even angle. Pure CSS via :checked.
10 / 21
Glass Dome
Pure CSS 
A glass hemisphere with backdrop-blur and an inner highlight; menu items orbit along the dome edge. Items lift on hover. The hero of the dome family.
11 / 21
Holographic Dome
Pure CSS 
A translucent dome with an iridescent rim that rotates continuously via @property-animated conic gradient. The dome itself stays still; only the rim shimmers.
12 / 21
Single Satellite Orbit
Pure CSS 
One satellite continuously orbits the central FAB. Hover the FAB to pause the orbit, click to "lock in" the satellite at its current angle. Pure CSS via :hover paused state.
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). Real CSS animation, no JS.
14 / 21
Hexagonal Honeycomb
Pure CSS 
Six hexagonal items arranged around a central hex via real geometry (clip-path polygon). Each cell highlights independently. Honeycomb pattern with mathematical precision.
15 / 21
Rotating Triangle Trio
Pure CSS 
Three triangle items rotate together in a trio formation. Hover any triangle to lift it forward. The whole group rotates slowly on idle for visual interest.
16 / 21
Vinyl Record
Pure CSS 
A spinning vinyl record menu. The disc rotates continuously; menu items sit on the label area. Pause on hover via animation-play-state. Classic music-app metaphor.
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. Hover any direction to rotate the needle smoothly via :has().
18 / 21
Iris Aperture
Pure CSS 
A camera-lens iris with 6 blades. On hover the blades "stop down" via clip-path + rotation, revealing menu items around the exposed diaphragm.
19 / 21
Black Hole
Pure CSS 
Items orbit a glowing accretion-disk singularity at all times. On hover the disk pulses brighter and items lift outward slightly — a gravitational "release". Items stay clickable throughout.
20 / 21
Chronometer
Pure CSS 
An analog watch face with menu items at hour positions. The second-hand sweeps continuously; click any hour position to "set" the menu (hand snaps to that hour).
Advertisement
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