Logo of UI Challenges
Sign in
Wireframe example for Floating Action Button Menu
An example interpretation of the prompt
Icon of target

Floating Action Button Menu

Icon of book open

Design a mobile screen where a prominent FAB sits at the bottom-right and expands into a small action menu on tap. Treat the FAB as the entry point, not the whole pattern: the closed state, expanded state, and the transition between them should all feel native to a phone UI.

The menu should expose multiple related actions that clearly belong together. Keep the relationship between the main FAB and its child actions obvious through spacing, labels, and motion so the user can tell what each option does without hunting.

Make the expanded menu work in real app chrome, with content behind it, thumb reach, and nearby navigation or content elements that still need to be readable. The design should account for how the menu overlays the screen without feeling detached from the underlying context.

This challenge is interesting because the FAB has to carry both discovery and control: it is a compact affordance when closed, then becomes a small decision point when open. The design should make that change feel intentional and quick to scan.

Icon of book open

Use labels that appear close to each child action, not far away from the FAB, so the menu reads as one grouped control instead of separate buttons floating in space.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.