2 Pure CSS5 with JSPublished 2026-10-05Free · no sign-up
Seven circular menus: actions that spread round a button, a thumb-friendly semicircle, a pie with four wedge buttons, a clock-face hour picker, a quarter circle from the corner, a ring of team avatars and a dial that turns to the chosen setting.
Pressing the centre button spreads five actions evenly round a circle. Each action's angle is its index times 72 degrees in a custom property, placed with rotate, translate and a counter-rotation so the icons stay upright. Closed actions are hidden and cannot be tabbed to.
var c = document.querySelector('.cm1 .c'), m = document.getElementById('cm1m');
c.onclick = function () { var o = c.getAttribute('aria-expanded') !== 'true'; c.setAttribute('aria-expanded', o); m.hidden = !o; };
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !m.hidden) { c.click(); c.focus(); } });
02. Semicircle Menu from the Bottom
CircularMobile
A thumb-friendly half circle of actions that opens above a button at the bottom of the screen. Four actions are spread over 180 degrees, which keeps every target within easy reach of the thumb holding the phone.
var c = document.querySelector('.cm2 .c'), m = document.getElementById('cm2m');
c.onclick = function () { var o = c.getAttribute('aria-expanded') !== 'true'; c.setAttribute('aria-expanded', o); m.hidden = !o; };
03. Four-Quadrant Pie Menu
CircularPie
A round control split into four wedge-shaped buttons, like a game controller's direction pad. Each wedge is a button clipped to a quarter circle with clip-path, with its label positioned towards its outer edge, and each has a full text name.
Twelve hour buttons arranged like a clock face, a natural way to pick a time on touch screens. They are radio buttons in a fieldset, so arrow keys move round the circle and only one hour can be chosen, and the choice is written in the centre.
var f = document.querySelector('.cm4'), out = f.querySelector('output');
for (var h = 1; h <= 12; h++) { var l = document.createElement('label'); l.style.setProperty('--h', h); l.innerHTML = '<input type="radio" name="cm4" value="' + h + '"' + (h === 9 ? ' checked' : '') + '>' + h; f.appendChild(l); }
f.addEventListener('change', function (e) { out.textContent = e.target.value + ':00'; });
05. Quarter-Circle Corner Menu
CircularCorner
A menu that opens as a quarter circle from the bottom-right corner, three links fanned across 90 degrees. It suits a corner of a game or creative tool, and the links are hidden from focus while it is closed.
var b = document.querySelector('.cm5 button'), m = document.getElementById('cm5m');
b.onclick = function () { var o = b.getAttribute('aria-expanded') !== 'true'; b.setAttribute('aria-expanded', o); m.hidden = !o; };
06. Team Circle of Avatars
CircularAvatars
Team members arranged in a ring around the company logo, each avatar a link to their profile with their name as its accessible name. The ring positions come from the same rotate and translate trick as a radial menu, with no JavaScript.
A dial that rotates to point at the chosen mode, built on a native range input so arrow keys and screen readers work. The input's value sets the dial's rotation and the mode name below it, and the dial graphic is decoration only.
var r = document.getElementById('cm7r'), d = document.querySelector('.cm7 .dial'), b = document.querySelector('.cm7 b'), names = ['Off', 'Low', 'Med', 'High'];
r.oninput = function () { d.style.setProperty('--r', (-135 + r.value * 90) + 'deg'); b.textContent = names[r.value]; r.setAttribute('aria-valuetext', names[r.value]); };
About these CSS Circular Menus
The placement trick
rotate(angle) translate(radius) rotate(-angle) places an item on a circle and turns it back upright. Store the angle in a custom property per item, such as --i multiplied by the step, and the whole ring is CSS.
Hidden means unreachable
When a radial menu is closed, hide its list with the hidden attribute, not just opacity, so its buttons cannot be tabbed to. The toggle reports the state with aria-expanded.
Use native controls where possible
A clock face is a set of radio buttons and a dial is a range input. Laying familiar controls out in a circle keeps keyboard and screen reader support for free.
Keep targets large
Items on a circle crowd quickly. Keep each target at least 44 pixels and limit the ring to five to eight items.
Frequently asked questions
Are radial menus good on desktop?
They suit touch, games and creative tools. For ordinary websites a list is faster to read.
How do I change the radius?
Change the translate distance; keep it larger than half the button size plus the item size.
Do they need JavaScript?
Only to toggle open and closed. The layout is pure CSS.