21 CSS Circular & Radial Menu Designs
Service Orbit
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.
Service Orbit the 2nd of 21 designs in the 21 CSS Circular & Radial Menu Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ccm-svc">
<input type="radio" name="ccm-svc" id="ccm-svc-0" class="ccm-svc-r" hidden checked />
<input type="radio" name="ccm-svc" id="ccm-svc-1" class="ccm-svc-r" hidden />
<input type="radio" name="ccm-svc" id="ccm-svc-2" class="ccm-svc-r" hidden />
<input type="radio" name="ccm-svc" id="ccm-svc-3" class="ccm-svc-r" hidden />
<input type="radio" name="ccm-svc" id="ccm-svc-4" class="ccm-svc-r" hidden />
<input type="radio" name="ccm-svc" id="ccm-svc-5" class="ccm-svc-r" hidden />
<div class="ccm-svc-orbit" aria-hidden="true"></div>
<div class="ccm-svc-disc">
<span class="ccm-svc-title ccm-svc-t-0">Industries</span>
<span class="ccm-svc-title ccm-svc-t-1">Validation</span>
<span class="ccm-svc-title ccm-svc-t-2">Engineering</span>
<span class="ccm-svc-title ccm-svc-t-3">Project Mgmt</span>
<span class="ccm-svc-title ccm-svc-t-4">Manufacturing</span>
<span class="ccm-svc-title ccm-svc-t-5">Automation</span>
<span class="ccm-svc-cta">Learn more →</span>
</div>
<div class="ccm-svc-pointer" aria-hidden="true"></div>
<label for="ccm-svc-0" class="ccm-svc-sat" style="--i: 0" aria-label="Industries"
><span>♨</span></label
>
<label for="ccm-svc-1" class="ccm-svc-sat" style="--i: 1" aria-label="Validation"
><span>✓</span></label
>
<label for="ccm-svc-2" class="ccm-svc-sat" style="--i: 2" aria-label="Engineering"
><span>⚙</span></label
>
<label for="ccm-svc-3" class="ccm-svc-sat" style="--i: 3" aria-label="Project Management"
><span>◈</span></label
>
<label for="ccm-svc-4" class="ccm-svc-sat" style="--i: 4" aria-label="Manufacturing"
><span>⛭</span></label
>
<label for="ccm-svc-5" class="ccm-svc-sat" style="--i: 5" aria-label="Automation"
><span>⌬</span></label
>
</div> .ccm-svc {
--n: 6;
--ba: calc(360deg / var(--n));
--r: 105px;
--pa: 0deg;
position: relative;
width: 260px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui, sans-serif;
}
.ccm-svc-orbit {
position: absolute;
width: calc(var(--r) * 2);
height: calc(var(--r) * 2);
border-radius: 50%;
border: 1px dashed rgba(124, 108, 255, 0.18);
background: radial-gradient(circle at center, rgba(124, 108, 255, 0.08), transparent 70%);
}
.ccm-svc-disc {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #a78bfa);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow:
0 8px 24px rgba(124, 108, 255, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
z-index: 2;
}
.ccm-svc-title {
display: none;
font:
700 14px/1.2 system-ui,
sans-serif;
text-align: center;
padding: 0 12px;
}
.ccm-svc-cta {
display: block;
margin-top: 8px;
padding: 4px 10px;
font:
600 10px/1 ui-monospace,
monospace;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 999px;
cursor: pointer;
transition:
background 0.2s,
color 0.2s;
}
.ccm-svc-cta:hover {
background: #fff;
color: #7c6cff;
}
.ccm-svc:has(#ccm-svc-0:checked) .ccm-svc-t-0,
.ccm-svc:has(#ccm-svc-1:checked) .ccm-svc-t-1,
.ccm-svc:has(#ccm-svc-2:checked) .ccm-svc-t-2,
.ccm-svc:has(#ccm-svc-3:checked) .ccm-svc-t-3,
.ccm-svc:has(#ccm-svc-4:checked) .ccm-svc-t-4,
.ccm-svc:has(#ccm-svc-5:checked) .ccm-svc-t-5 {
display: block;
}
.ccm-svc-pointer {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 2px solid #7c6cff;
box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
transform: rotate(var(--pa)) translateY(calc(var(--r) * -0.55));
transform-origin: 50% 50%;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 3;
}
.ccm-svc:has(#ccm-svc-0:checked) {
--pa: 0deg;
}
.ccm-svc:has(#ccm-svc-1:checked) {
--pa: 60deg;
}
.ccm-svc:has(#ccm-svc-2:checked) {
--pa: 120deg;
}
.ccm-svc:has(#ccm-svc-3:checked) {
--pa: 180deg;
}
.ccm-svc:has(#ccm-svc-4:checked) {
--pa: 240deg;
}
.ccm-svc:has(#ccm-svc-5:checked) {
--pa: 300deg;
}
.ccm-svc-sat {
position: absolute;
width: 44px;
height: 44px;
border-radius: 50%;
background: #1f1f2e;
border: 1px solid rgba(124, 108, 255, 0.4);
color: #c4b5fd;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
rotate(calc(var(--i) * var(--ba) * -1));
transition:
background 0.25s,
color 0.25s,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s;
z-index: 4;
}
.ccm-svc-sat span {
font-size: 18px;
line-height: 1;
}
.ccm-svc-sat:hover,
.ccm-svc-sat:focus-visible {
background: #2a2a3e;
color: #fff;
transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}
.ccm-svc:has(#ccm-svc-0:checked) [for="ccm-svc-0"],
.ccm-svc:has(#ccm-svc-1:checked) [for="ccm-svc-1"],
.ccm-svc:has(#ccm-svc-2:checked) [for="ccm-svc-2"],
.ccm-svc:has(#ccm-svc-3:checked) [for="ccm-svc-3"],
.ccm-svc:has(#ccm-svc-4:checked) [for="ccm-svc-4"],
.ccm-svc:has(#ccm-svc-5:checked) [for="ccm-svc-5"] {
background: #7c6cff;
color: #fff;
border-color: #fff;
box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.3);
transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}