Radial Menu — Free HTML CSS JS Fan-Out Action Snippet

<div class="rm-stage">
  <div class="rm-menu" id="rmMenu">
    <button class="rm-trigger" id="rmTrigger" aria-haspopup="true" aria-expanded="false" aria-label="Open actions">+</button>
  </div>
  <p class="rm-hint">Click the button to fan out actions</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a16;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:30px}

.rm-menu{position:relative;width:64px;height:64px}
.rm-trigger{position:absolute;inset:0;z-index:3;border:none;border-radius:50%;background:linear-gradient(160deg,#6366f1,#9333ea);color:#fff;font-size:30px;font-weight:300;cursor:pointer;box-shadow:0 12px 30px -8px rgba(99,102,241,.7);transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.rm-menu.open .rm-trigger{transform:rotate(135deg)}

.rm-item{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px;z-index:2;border:none;border-radius:50%;background:#1c1c30;border:1px solid #2e2e4c;color:#c7d2fe;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transform:translate(0,0) scale(.2);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1),opacity .25s;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.rm-menu.open .rm-item{opacity:1;pointer-events:auto}
.rm-item:hover{background:#6366f1;color:#fff}
.rm-label{position:absolute;white-space:nowrap;font-size:11px;background:#000;color:#fff;padding:2px 7px;border-radius:6px;opacity:0;transition:opacity .2s;bottom:-22px;left:50%;transform:translateX(-50%);pointer-events:none}
.rm-item:hover .rm-label{opacity:1}

.rm-hint{color:#56566e;font-size:13px}

var menu = document.getElementById('rmMenu');
var trigger = document.getElementById('rmTrigger');
var ACTIONS = [
  { icon: '✎', label: 'Edit' }, { icon: '⎙', label: 'Print' }, { icon: '⇄', label: 'Share' },
  { icon: '★', label: 'Save' }, { icon: '🗑', label: 'Delete' }
];
var RADIUS = 92, START = 180, SPREAD = 180;   // fan out across a half-circle arc

// Build items and pre-compute each one's resting offset on the arc.
var items = ACTIONS.map(function (a, i) {
  var btn = document.createElement('button');
  btn.className = 'rm-item';
  btn.innerHTML = a.icon + '<span class="rm-label">' + a.label + '</span>';
  var angle = (START + (SPREAD / (ACTIONS.length - 1)) * i) * Math.PI / 180;
  btn.dataset.x = Math.cos(angle) * RADIUS;
  btn.dataset.y = Math.sin(angle) * RADIUS;
  menu.appendChild(btn);
  return btn;
});

var open = false;
function setOpen(v) {
  open = v;
  menu.classList.toggle('open', v);
  trigger.setAttribute('aria-expanded', v ? 'true' : 'false');
  items.forEach(function (btn, i) {
    // Stagger each item slightly so they spring out in sequence.
    btn.style.transitionDelay = (v ? i * 35 : (items.length - i) * 20) + 'ms';
    btn.style.transform = v
      ? 'translate(' + btn.dataset.x + 'px,' + btn.dataset.y + 'px) scale(1)'
      : 'translate(0,0) scale(.2)';
  });
}

trigger.addEventListener('click', function (e) { e.stopPropagation(); setOpen(!open); });
document.addEventListener('click', function () { if (open) setOpen(false); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && open) setOpen(false); });