Floating Action Button Radial Menu — HTML CSS JS

The Floating Action Button (FAB) is the centerpiece of Material Design — a persistent, elevated button that represents the primary action of a screen. This snippet extends the classic single FAB (see the simpler expanding FAB) into a radial menu: clicking the main button fans out five secondary action buttons in an arc pattern, each with a spring-animated entrance and a hover tooltip, overlaid on a blurred backdrop.

Radial arc positioning with CSS transform translate

The five action items all start at position: absolute; bottom: 0; right: 0 — stacked directly under the main FAB button. In their closed state, transform: scale(0) translate(6px,6px); opacity:0 makes them invisible. When the .open class is added to the container, each item gets a specific translate target that positions it along a 90° arc swept into the upper-left quadrant only: - Item 1: translate(0,-140px) — straight up - Item 2: translate(-54px,-129px) — 22.5° toward left - Item 3: translate(-99px,-99px) — upper-left diagonal (cos 45° × 140 ≈ 99) - Item 4: translate(-129px,-54px) — 67.5° toward left - Item 5: translate(-140px,0) — straight left

The 140px radius and 22.5° angle increments create a quarter-circle arc that only ever moves up and left — never down. That matters because the FAB is anchored to the bottom-right corner of the viewport: any item with a positive (downward) y-offset would be pushed toward or past the bottom edge of the screen and get clipped or hidden behind other fixed UI. Keeping every item's y-offset zero or negative guarantees all five stay fully visible regardless of how close to the bottom of the page the button sits. The radius is deliberately larger than the 44px item diameter would strictly require, so adjacent items clear each other with a visible gap instead of their circular hit areas overlapping. The positions are pure CSS — no JavaScript trigonometry needed because the arc positions are calculated once and hardcoded.

Spring stagger animation

Each item's transition uses cubic-bezier(.34,1.56,.64,1) — the spring easing — for both transform and opacity. The stagger is achieved with transition-delay values: item 1 at 40ms, item 2 at 80ms, item 3 at 120ms, item 4 at 160ms, item 5 at 200ms. This creates a wave of items appearing in sequence rather than all at once, making the radial expansion feel organic. The 40ms increment is just long enough to perceive as sequential but short enough to feel snappy overall.

Icon crossfade on open/close

The main FAB contains two SVG icons: a plus sign and an X. Both are position: absolute inside the button. The plus starts visible; the X starts with opacity:0; transform:rotate(-90deg) scale(.6). When open, the plus fades and rotates out (opacity:0; rotate(90deg)) while the X fades in and un-rotates to its normal position. This 90° rotation crossfade communicates the dual state of the button without requiring a text label.

Backdrop blur overlay

The backdrop is a position:fixed; inset:0 div with background:rgba(15,23,42,.3); backdrop-filter:blur(2px). When visible it dims and blurs the page content, visually isolating the FAB menu — the same backdrop technique used by the modal snippet. The backdrop also acts as a click target — clicking it closes the menu. The pointer-events:none on the hidden state prevents it from blocking interaction with the page when the FAB is closed.

Dynamic tooltip positioning

Rather than CSS-only tooltips, the tooltip element is repositioned in JavaScript using getBoundingClientRect() to get the hovered item's screen position, then setting the tooltip's right and bottom based on window.innerWidth - rect.right and window.innerHeight - rect.top. This ensures the tooltip always appears to the right of the arc item regardless of which item is hovered, without needing individual tooltip elements per item.

Keyboard and accessibility

The main button has aria-expanded toggled and aria-label="Open actions". Pressing Escape closes the menu. A production implementation would also add aria-label to each action item and manage focus trap behavior so keyboard users can navigate the arc items with Tab/arrow keys.

React export pattern

In React: const [open, setOpen] = useState(false). Each item is a mapped array of { id, icon, label, onClick } objects. The container div gets className={fab-container ${open ? 'open' : ''}}. The backdrop onClick handler calls setOpen(false). Since the arc positions are pure CSS classes (.fab-item-1 through .fab-item-5), the React component simply passes the index to generate the class name: className={fab-item fab-item-${i+1}}.