Floating Action Menu

Pro

A round action button that unfolds into a short menu of labelled actions with a staggered reveal.

Framework

0 px

100%

Code

Pro component

The full source of Pro components arrives with Tech Store Pro. Free components stay open.

The quick-actions button for mobile screens and dashboards: one tap away, out of the way the rest of the time.

Items fan out from the button one after another; the icon turns into a close mark.
Closes on Escape, on an outside click and after choosing an action.
Actions are data — label, icon and handler — so the menu fits any screen.

The trigger is a button with aria-expanded and aria-controls; the menu is a role="menu" of menuitems.
Focus moves into the menu when it opens and back to the trigger when it closes; arrow keys move between items.
The fan-out is a plain fade under prefers-reduced-motion: reduce.