21 CSS Circular & Radial Menu Designs
Hexagonal Honeycomb
Six hexagonal items arranged around a central hex via real geometry (clip-path polygon). Each cell highlights independently. Honeycomb pattern with mathematical precision.
Hexagonal Honeycomb the 14th 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-hex"> <a href="#" class="ccm-hex-c" aria-label="Center">◆</a> <a href="#" class="ccm-hex-i" style="--a: -90deg" aria-label="N">N</a> <a href="#" class="ccm-hex-i" style="--a: -30deg" aria-label="NE">NE</a> <a href="#" class="ccm-hex-i" style="--a: 30deg" aria-label="SE">SE</a> <a href="#" class="ccm-hex-i" style="--a: 90deg" aria-label="S">S</a> <a href="#" class="ccm-hex-i" style="--a: 150deg" aria-label="SW">SW</a> <a href="#" class="ccm-hex-i" style="--a: 210deg" aria-label="NW">NW</a> </div>
.ccm-hex {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.ccm-hex-c,
.ccm-hex-i {
width: 50px;
height: 58px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: inline-flex;
align-items: center;
justify-content: center;
font:
700 11px/1 system-ui,
sans-serif;
text-decoration: none;
transition:
transform 0.2s,
background 0.2s;
}
.ccm-hex-c {
background: linear-gradient(135deg, #7c6cff, #a78bfa);
color: #fff;
position: relative;
z-index: 2;
}
.ccm-hex-i {
position: absolute;
top: 50%;
left: 50%;
margin: -29px -25px;
background: #1f1f2e;
color: #c4b5fd;
transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1));
}
.ccm-hex-i:hover,
.ccm-hex-i:focus-visible {
background: #2a2a3e;
color: #fff;
transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1)) scale(1.1);
} More from 21 CSS Circular & Radial Menu Designs
Single Satellite OrbitSolar SystemRotating Triangle TrioVinyl RecordCompass RoseIris ApertureBlack HoleChronometerNebula CloudMission HubService OrbitTactile Dial
View the full collection →