Build a Speed Dial Menu | Interview Question

Q: Build a Speed Dial Menu

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes React state and props; `inert`, staggered transitions and outside-press handling are explained here. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: callout. Logic was verified on React 19.3.1 in jsdom; layout, the real stagger, Tab order and hit testing were checked in Chromium 141, because jsdom has no layout or animation. ## 1. Why This Even Matters — A Story First Picture a fan of playing cards held closed in one hand. Flick your thumb and the cards spread out one after another, the nearest first, until you can see every face. Pick one, or close your hand, and they slide back into a neat stack, the farthest first. Nobody can pick a card while the fan is closed, even though all the cards are still in your hand. A speed dial is that fan of cards on top of a single round button. It is a good interview widget because it combines three i

The problem

Question presented to candidate: "Our mobile web app has a round floating action button in the bottom-right corner. Tapping it should fan out a short column of secondary actions (Share, Print, Copy link, Download) with a little staggered animation, and collapse again when you pick one, tap elsewhere or press Escape. Build it."

Requirements:

A floating action button (FAB) fixed to the bottom-right that toggles a vertical column of action buttons above it; the "+" icon rotates into a "×".
Staggered animation: on open the action nearest the FAB appears first; on close the farthest disappears first.
Choosing an action reports it and closes; Escape closes; a press outside closes; focus returns to the FAB.
Keyboard: from the open FAB, ArrowUp moves into the actions and up the column, ArrowDown moves back down to the FAB; Tab reaches the actions only while open.
Each action has a visible text label as well as an icon; respects prefers-reduced-motion.

What a strong answer should cover:

Keeping the actions mounted so the close animation can play, and making them inert while closed so they are unreachable.
Computing per-item transition-delay from the index and the direction (open vs close).
Outside-press detection with contains() and listener cleanup, and focus return to the FAB.
ARIA for the FAB (aria-expanded, aria-controls, an accessible name) and why icon-only actions need labels.
Reduced motion and touch target sizes (at least 44 px).

Clarifying questions expected:

"Vertical or radial layout? Which direction does it open?"
"Should it also open on hover on desktop?"
"Is it a primary action plus extras, or only a launcher?"

Code / implementation expected: Yes. One component plus a demo; CSS transitions, no animation library.

React
Menu
Animation

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. Assumes React state and props; inert, staggered transitions and outside-press handling are explained here. Difficulty: Medium

How to read this doc: Plain words first, then a 📌 Interview term: callout. Logic was verified on React 19.3.1 in jsdom; layout, the real stagger, Tab order and hit testing were checked in Chromium 141, because jsdom has no layout or animation.

1. Why This Even Matters — A Story First

Picture a fan of playing cards held closed in one hand. Flick your thumb and the cards spread out one after another, the nearest first, until you can see every face. Pick one, or close your hand, and they slide back into a neat stack, the farthest first. Nobody can pick a card while the fan is closed, even though all the cards are still in your hand.

A speed dial is that fan of cards on

The solution is hidden so you can try first

9 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import SpeedDial from "./src/components/SpeedDial";

const ACTIONS = [
  { id: "share", label: "Share", icon: "↗", done: "Link shared" },
  { id: "print", label: "Print", icon: "⎙", done: "Sent to printer" },
  { id: "copy", label: "Copy link", icon: "⧉", done: "Link copied" },
  { id: "download", label: "Download", icon: "↓", done: "Download started" },
];

export default function App() {
  const [status, setStatus] = useState("Pick an action");
  return (
    <main className="page">
      <h1>Speed dial</h1>
      <p className="hint">
        Click the round button, or focus it and use the arrow keys. Escape or a
        click outside closes it.
      </p>
      <p data-testid="status" aria-live="polite">
        {status}
      </p>
      <SpeedDial actions={ACTIONS} onAction={(a) => setStatus(a.done)} />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.