FAB Menu

Overview

A FAB menu is the expandable ("speed dial") variant of the FAB. A filled circular trigger, when activated, reveals a stack of related actions above it as extended-FAB pills and turns into a close (×) button. Use it to group a few secondary actions that belong to the same context while keeping the primary action immediately available — and to reduce clutter on the screen.

It is a compound component: FabMenu owns the open state, FabMenuTrigger is the circular FAB, and each FabMenuItem is an action. The menu closes on Escape and on an outside click. Two color roles match the Figma spec: primary (purple trigger + lavender items) and secondary (blue).

Examples

Variants

primary and secondary color roles. The trigger uses the filled color and each item the matching container color.

Usage

import { Plus, Pencil, Share2 } from "lucide-react";
import { FabMenu, FabMenuTrigger, FabMenuItem } from "@/components/ui/fab-menu";

export function Example() {
  return (
    <FabMenu variant="primary">
      <FabMenuTrigger aria-label="Actions">
        <Plus />
      </FabMenuTrigger>
      <FabMenuItem icon={<Pencil />}>Edit</FabMenuItem>
      <FabMenuItem icon={<Share2 />}>Share</FabMenuItem>
    </FabMenu>
  );
}

The menu is uncontrolled by default; pass open + onOpenChange to control it.

Installation

API Reference

Accessibility

• The trigger exposes aria-expanded and aria-controls pointing at the item stack.
• Items are removed from the tab order (and hidden from assistive tech) while collapsed.
• Closes on Escape and on an outside click.
• Each FabMenuItem has a visible text label, which also names the control; pass an aria-label on the trigger to describe the menu.