16 CSS Mobile Navigation Patterns 05 / 16

Radial Fan Menu

A floating action button that rotates 45° on activation and fans out five labelled radial action items in a bottom-right arc, each with a staggered spring entrance via CSS cubic-bezier.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="mn-05">
  <input type="checkbox" id="mn-05-toggle">
  <div class="mn-05__overlay"></div>

  <div class="mn-05__page">
    <div class="mn-05__header">
      <div class="mn-05__logo">Spark<span>AI</span></div>
    </div>
    <div class="mn-05__hero-text">
      <h2>Your creative workspace</h2>
      <p>Generate, edit, and share stunning visuals with AI-powered tools.</p>
    </div>
    <div class="mn-05__stat-row">
      <div class="mn-05__stat">
        <div class="mn-05__stat-val">248</div>
        <div class="mn-05__stat-label">Creations</div>
      </div>
      <div class="mn-05__stat">
        <div class="mn-05__stat-val">12k</div>
        <div class="mn-05__stat-label">Views</div>
      </div>
      <div class="mn-05__stat">
        <div class="mn-05__stat-val">94</div>
        <div class="mn-05__stat-label">Likes</div>
      </div>
    </div>
  </div>

  <div class="mn-05__radial-items">
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent3)">🖼️</div>
      <span class="mn-05__radial-label">Gallery</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent4)">✏️</div>
      <span class="mn-05__radial-label">Edit</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent5)">📤</div>
      <span class="mn-05__radial-label">Share</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent2)">⭐</div>
      <span class="mn-05__radial-label">Favorites</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:#0ea5e9">⚙️</div>
      <span class="mn-05__radial-label">Settings</span>
    </div>
  </div>

  <label for="mn-05-toggle" class="mn-05__fab">
    <span class="mn-05__fab-icon">+</span>
  </label>
</div>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-05 {
  --bg: #0f172a;
  --surface: #1e293b;
  --accent: #6366f1;
  --accent2: #ec4899;
  --accent3: #14b8a6;
  --accent4: #f59e0b;
  --accent5: #22c55e;
  --text: #f1f5f9;
  --muted: #64748b;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

.mn-05 #mn-05-toggle { display: none; }

/* Background overlay */
.mn-05__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 5;
}
.mn-05 #mn-05-toggle:checked ~ .mn-05__overlay {
  opacity: 1;
  pointer-events: all;
}

/* Page content */
.mn-05__page {
  position: absolute;
  inset: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}
.mn-05__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.mn-05__logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.mn-05__logo span { color: var(--accent); }

.mn-05__hero-text {
  margin-bottom: 24px;
}
.mn-05__hero-text h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.7px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.mn-05__hero-text p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.mn-05__stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.mn-05__stat {
  flex: 1;
  background: var(--surface);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.mn-05__stat-val { font-size: 22px; font-weight: 700; color: var(--text); }
.mn-05__stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* FAB button */
.mn-05__fab {
  position: absolute;
  bottom: 28px;
  right: 24px;
  z-index: 20;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(99,102,241,0.5);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.mn-05__fab:hover { transform: scale(1.08); }
.mn-05 #mn-05-toggle:checked ~ .mn-05__fab {
  background: var(--accent2);
  transform: rotate(45deg);
}
.mn-05__fab-icon {
  font-size: 22px;
  color: #fff;
  transition: transform 0.3s;
  line-height: 1;
}

/* Radial items */
.mn-05__radial-item {
  position: absolute;
  z-index: 15;
  display: flex;
  /* row-reverse: label sits to the LEFT of the btn. The btn is on
     the right edge of the item (anchored to the right:Npx arc
     position), and the label extends LEFTWARD into the empty page
     area instead of stacking vertically below the btn — that fixes
     the label/adjacent-btn overlap when buttons sit close on the
     vertical part of the arc. */
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-05__radial-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.mn-05__radial-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: rgba(0,0,0,0.6);
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Items positioned on a 140px arc fanning out from the FAB center.
   FAB at bottom:28 right:24 (58x58) so FAB center is at bottom:57
   right:53. Item buttons are 48x48 → subtract 24 to center btn on
   the arc. Result:
     right  = 53 + 140*sin(θ) - 24 = 29 + 140*sin(θ)
     bottom = 57 + 140*cos(θ) - 24 = 33 + 140*cos(θ)
   Five items spread across 10°-85° with NON-LINEAR angle distribution
   (10°, 32°, 50°, 68°, 85°) so vertical spacing between adjacent items
   increases progressively along the arc — the top items where cos
   changes slowly get larger angular jumps to avoid label overlap.
   Source-order matches visual order: Gallery near top, Settings near
   left. */
.mn-05__radial-item:nth-child(1) { bottom: 171px; right:  53px; transform: translateY(20px) scale(0.7); } /* 10° Gallery   */
.mn-05__radial-item:nth-child(2) { bottom: 152px; right: 103px; transform: translateY(20px) scale(0.7); } /* 32° Edit      */
.mn-05__radial-item:nth-child(3) { bottom: 123px; right: 136px; transform: translateY(20px) scale(0.7); } /* 50° Share     */
.mn-05__radial-item:nth-child(4) { bottom:  86px; right: 159px; transform: translateY(20px) scale(0.7); } /* 68° Favorites */
.mn-05__radial-item:nth-child(5) { bottom:  45px; right: 168px; transform: translateY(20px) scale(0.7); } /* 85° Settings  */

.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item {
  opacity: 1;
  pointer-events: all;
}
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(1) { transform: translateY(0) scale(1); transition-delay: 0.03s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(2) { transform: translateY(0) scale(1); transition-delay: 0.08s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(3) { transform: translateY(0) scale(1); transition-delay: 0.13s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(4) { transform: translateY(0) scale(1); transition-delay: 0.18s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(5) { transform: translateY(0) scale(1); transition-delay: 0.23s; }

@media (prefers-reduced-motion: reduce) {
  .mn-05__fab, .mn-05__radial-item, .mn-05__overlay { transition: none; }
}

How this works

The five radial items are absolutely positioned at specific bottom and right values to form an arc. In the closed state each item is opacity: 0; pointer-events: none; transform: scale(0.6) translateY(20px). The checkbox :checked sibling rule transitions every item to opacity: 1; scale(1); translateY(0) with incremental transition-delay (0, 0.05, 0.10, 0.15, 0.20s) creating the stagger.

The FAB itself rotates 45° via transform: rotate(45deg) and changes background from --accent to --accent2 on checked, visually converting the + into an x. The background overlay is a sibling that fades from opacity: 0 to opacity: 1 and carries a <label for> so clicking outside closes the menu.

Customize

  • Reposition the fan arc by adjusting the bottom and right values on each .mn-05__radial-item:nth-child(N) — shift them further apart for a wider arc or closer for a tighter cluster.
  • Add a sixth item by inserting a new .mn-05__radial-item at a new position and extending the :checked ~ ... li:nth-child(6) delay rule to 0.25s.
  • Change FAB shape from round to a rounded square by editing border-radius: 50% on .mn-05__fab to border-radius: 16px.
  • Replace emoji icons with SVG by swapping the emoji inside .mn-05__radial-btn and setting a fixed width/height on the SVG element.
  • Remove the background overlay scrim by setting .mn-05__overlay { display: none } if you want the page content to remain interactive while the fan is open.

Watch out for

  • Hard-coded bottom/right pixel positions for the arc mean the layout is designed for a 375px mobile card — different container widths require recalculating positions.
  • The radial items use position: absolute relative to the .mn-05 root, not the FAB — moving the FAB to a different position requires updating all item coordinates manually.
  • pointer-events: none on hidden items is critical; without it the invisible buttons intercept taps on the underlying page content.

Browser support

ChromeSafariFirefoxEdge
60+ 12+ 55+ 60+

cubic-bezier spring easing is universally supported; no special flags needed.

More from 16 CSS Mobile Navigation Patterns

Minimal Dot NavigationCommand Palette Search NavHamburger Slide-Out DrawerFull-Screen Overlay NavigationiOS-Style Bottom Tab BarMorphing Hamburger to XFAB Speed Dial NavigationTab Bar with Sliding Indicator PillMega Menu AccordionGlass Morphism Nav DrawerCyberpunk Neon MenuBreadcrumb Collapse Navigation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →