NAVIGATION

Radial Social Media Menu

A modern radial social menu with smooth staggered animations, glass-style buttons and a cyan-purple CodeRipple hover effect.

HTML
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
>

<div class="radial-demo-wrap">

  <div class="cr-radial-menu" id="crRadialMenu">

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="GitHub">
        <i class="fa-brands fa-github"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="LinkedIn">
        <i class="fa-brands fa-linkedin-in"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="Dribbble">
        <i class="fa-brands fa-dribbble"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="Twitter">
        <i class="fa-brands fa-twitter"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="Facebook">
        <i class="fa-brands fa-facebook-f"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="Google Plus">
        <i class="fa-brands fa-google-plus-g"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="Behance">
        <i class="fa-brands fa-behance"></i>
      </a>
    </div>

    <div class="cr-rotater">
      <a href="#" class="cr-social-icon" aria-label="CodePen">
        <i class="fa-brands fa-codepen"></i>
      </a>
    </div>


    <button
      class="cr-radial-trigger"
      id="crRadialTrigger"
      aria-label="Toggle social menu"
    >
      <span class="cr-menu-line"></span>
      <span class="cr-menu-line"></span>
      <span class="cr-menu-line"></span>
    </button>

  </div>

</div>
CSS
.radial-demo-wrap{
  width:100%;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:150px 40px;
  background:#070d19;
  overflow:visible;
}

.cr-radial-menu{
  position:relative;
  width:80px;
  height:80px;
  font-size:16px;
}

.cr-radial-trigger{
  position:absolute;
  inset:0;
  width:80px;
  height:80px;
  border:1px solid rgba(34,211,238,.35);
  border-radius:50%;
  background:
    linear-gradient(
      135deg,
      rgba(34,211,238,.18),
      rgba(168,85,247,.18)
    );
  box-shadow:
    0 10px 35px rgba(0,0,0,.45),
    0 0 24px rgba(34,211,238,.08);
  cursor:pointer;
  z-index:10;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.cr-menu-line{
  position:absolute;
  left:27.5%;
  width:45%;
  height:2px;
  background:#ffffff;
  border-radius:5px;
  transition:
    top .3s ease,
    transform .3s ease,
    opacity .2s ease;
}

.cr-menu-line:nth-child(1){
  top:38%;
}

.cr-menu-line:nth-child(2){
  top:50%;
}

.cr-menu-line:nth-child(3){
  top:62%;
}

.cr-radial-menu.active .cr-menu-line:nth-child(1){
  top:50%;
  transform:rotate(45deg);
}

.cr-radial-menu.active .cr-menu-line:nth-child(2){
  opacity:0;
}

.cr-radial-menu.active .cr-menu-line:nth-child(3){
  top:50%;
  transform:rotate(-45deg);
}

.cr-rotater{
  position:absolute;
  inset:0;
  width:80px;
  height:80px;
  transform-origin:50% 50%;
  pointer-events:none;
}

.cr-social-icon{
  position:absolute;
  inset:0;
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:#101827;
  color:#cbd5e1;
  font-size:20px;
  text-decoration:none;
  opacity:0;
  transform:
    translateY(0)
    scale(.4);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35);
  transition:
    transform .35s cubic-bezier(.68,-.55,.27,1.55),
    opacity .25s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
  pointer-events:auto;
}

.cr-social-icon:hover{
  color:#22d3ee;
  border-color:#22d3ee;
  box-shadow:
    0 0 20px rgba(34,211,238,.22),
    0 8px 24px rgba(0,0,0,.35);
}

.cr-rotater:nth-child(1){
  transform:rotate(202.5deg);
}

.cr-rotater:nth-child(2){
  transform:rotate(247.5deg);
}

.cr-rotater:nth-child(3){
  transform:rotate(292.5deg);
}

.cr-rotater:nth-child(4){
  transform:rotate(337.5deg);
}

.cr-rotater:nth-child(5){
  transform:rotate(22.5deg);
}

.cr-rotater:nth-child(6){
  transform:rotate(67.5deg);
}

.cr-rotater:nth-child(7){
  transform:rotate(112.5deg);
}

.cr-rotater:nth-child(8){
  transform:rotate(157.5deg);
}

.cr-radial-menu.active
.cr-rotater:nth-child(1)
.cr-social-icon{
  transform:translateY(-120px) rotate(-202.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(2)
.cr-social-icon{
  transform:translateY(-120px) rotate(-247.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(3)
.cr-social-icon{
  transform:translateY(-120px) rotate(-292.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(4)
.cr-social-icon{
  transform:translateY(-120px) rotate(-337.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(5)
.cr-social-icon{
  transform:translateY(-120px) rotate(-22.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(6)
.cr-social-icon{
  transform:translateY(-120px) rotate(-67.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(7)
.cr-social-icon{
  transform:translateY(-120px) rotate(-112.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(8)
.cr-social-icon{
  transform:translateY(-120px) rotate(-157.5deg) scale(1);
  opacity:1;
}

.cr-radial-menu.active
.cr-rotater:nth-child(1)
.cr-social-icon,
.cr-radial-menu.active
.cr-rotater:nth-child(5)
.cr-social-icon{
  transition-delay:.02s;
}

.cr-radial-menu.active
.cr-rotater:nth-child(2)
.cr-social-icon,
.cr-radial-menu.active
.cr-rotater:nth-child(6)
.cr-social-icon{
  transition-delay:.05s;
}

.cr-radial-menu.active
.cr-rotater:nth-child(3)
.cr-social-icon,
.cr-radial-menu.active
.cr-rotater:nth-child(7)
.cr-social-icon{
  transition-delay:.08s;
}

.cr-radial-menu.active
.cr-rotater:nth-child(4)
.cr-social-icon,
.cr-radial-menu.active
.cr-rotater:nth-child(8)
.cr-social-icon{
  transition-delay:.11s;
}

@media(max-width:600px){

  .radial-demo-wrap{
    min-height:500px;
    padding:130px 20px;
  }

  .cr-radial-menu{
    transform:scale(.82);
  }

}
JavaScript
var radialMenu =
  document.getElementById('crRadialMenu');

var radialTrigger =
  document.getElementById('crRadialTrigger');

radialTrigger.addEventListener(
  'click',
  function(e){

    e.preventDefault();

    radialMenu.classList.toggle('active');

  }
);

document.addEventListener(
  'click',
  function(e){

    if (!radialMenu.contains(e.target)) {
      radialMenu.classList.remove('active');
    }

  }
);

How This Radial Social Media Menu Works

The Radial Social Media Menu places eight social links around a central circular trigger. The HTML includes links for GitHub, LinkedIn, Dribbble, Twitter, Facebook, Google Plus, Behance, and CodePen. Each link uses a Font Awesome brand icon and an aria-label that identifies its destination.

At the center, .cr-radial-trigger is an 80px circular button containing three .cr-menu-line elements. These lines form the hamburger icon while the menu is closed. The button uses a semi-transparent cyan-to-purple gradient, a subtle border, shadows, and backdrop-filter: blur(14px) to create its glass-like appearance against the dark #070d19 demo background.

The radial arrangement is created with eight .cr-rotater elements. Each one occupies the same 80px area but receives a different rotation angle. The angles start at 202.5deg and increase in 45-degree steps, distributing the social buttons evenly around the center.

Initially, every .cr-social-icon has opacity: 0 and is scaled down to .4. When .active is added to the main menu, each icon moves outward with translateY(-120px) and scales to its full size. Because its parent rotater is already positioned at a specific angle, this upward translation sends each button in a different radial direction.

An opposite rotation is also applied directly to every social icon. For example, the first parent is rotated 202.5deg, while its icon receives rotate(-202.5deg). These opposing transforms keep the actual social icons visually upright after they move around the circle. The transform animation lasts .35s and uses cubic-bezier(.68,-.55,.27,1.55), which gives the expanding buttons a slight overshoot effect. Small transition delays ranging from .02s to .11s add variation to their appearance.

The active state also transforms the hamburger button into a close icon. The first and third lines move to top: 50% and rotate by 45deg and -45deg, while the middle line fades to zero opacity. These changes use short CSS transitions rather than a separate keyframe animation. For more detail on this technique, see the MDN CSS transform documentation.

JavaScript controls opening and closing. Clicking #crRadialTrigger calls preventDefault() and toggles the active class on #crRadialMenu. A second click listener is attached to the entire document. It checks radialMenu.contains(e.target), and when the click occurs outside the menu, it removes the active class automatically.

On screens up to 600px wide, the component keeps the same radial structure but scales .cr-radial-menu down to .82. The surrounding demo area also uses reduced padding and a 500px minimum height to accommodate the expanded buttons.

Customizing the Radial Social Media Menu

The menu’s size, spacing, colors, icons, and animation can all be adjusted through values already present in the HTML and CSS.

  • Change translateY(-120px) to increase or decrease how far the social icons expand from the center.
  • Modify the eight rotation angles to change the placement of individual social buttons.
  • Replace the Font Awesome classes and aria-label values to use different social platforms.
  • Change the 80px dimensions of the trigger, menu, and social icons to alter the overall button size.
  • Replace #22d3ee in the hover styles to use a different accent color.
  • Adjust the .35s transform transition or its cubic-bezier curve to change the expansion speed and movement.
  • Modify the .02s to .11s transition delays to control how the icons appear during expansion.
  • Change the .82 mobile scale value to make the menu larger or smaller below the 600px breakpoint.

Where to Use This Radial Social Media Menu

A radial menu is useful when several secondary social links need to remain compact until the visitor chooses to reveal them.

  • Developer portfolio pages with multiple profile links
  • Personal websites and online resumes
  • Designer and creative portfolio interfaces
  • Profile or author sections
  • Dark-themed landing pages
  • Compact social sharing or profile-link areas

The current component is especially suited to eight destinations because its rotaters are separated by 45-degree increments. If you need a horizontal navigation pattern instead, the Floating Neon Navigation Bar provides another approach with icon labels and a moving active indicator.

Frequently Asked Questions

Does the Radial Social Media Menu use JavaScript?

Yes. JavaScript toggles the active class when the central trigger is clicked. It also listens for clicks outside the menu and removes the active state when necessary.

How are the social icons arranged in a circle?

Each social icon sits inside a .cr-rotater with a different rotation angle. In the active state, the icon is translated upward by 120px, causing it to move outward along the direction established by its rotated parent.

Why are opposite rotation values applied to the social icons?

The parent elements rotate to establish each radial direction. Applying the corresponding negative rotation to the icon counteracts that rotation, keeping the Font Awesome symbols upright.

Is the Radial Social Media Menu responsive?

Yes. At a maximum viewport width of 600px, the complete radial menu is scaled to .82. The demo container also reduces its padding while maintaining enough vertical space for the expanded icons.

The Radial Social Media Menu uses a compact HTML structure, rotational CSS transforms, staggered transitions, and simple JavaScript class toggling to expand eight social links around a central control.

Scroll to Top