The Yo-Yo FAB menu — thumb UI

This article talks about building a mobile-optimized web UI that combines a FAB (Floating Action Button) menu, breadcrumbs, and some yo-yo–inspired animations that help mobile users navigate complex branching choices — with one hand (using thumb).

PS: Article is human written, code via prompts to Claude Code’s Opus 4.8

Despite Steve Jobs saying back in the day we hold our iPhones wrong :) — mobile remains a one-hand world: you hold the phone, and your thumb does the work inside a fairly small reachable arc. The classic Floating Action Button (FAB) menu is great when you have a flat set of one to several choices that fan out in a ring. The trouble starts the moment your choices branch (think of a menu of menus) and that is when the FAB’s flat ring has nowhere to go.

For one of my projects, I currently explored a FAB menu that animates a “yo-yo” move: when you tap a child element, that child glides into the main button (aka previous parent position) and now its own children fan out around it. Tap the main button and the motion reverses, walking you back up. Easier to see:

The thesis:

Once your thumb learns this one gesture, you can navigate any tree-shaped menu, at any depth, from a single button that never leaves the corner.

The visual animation of what’s happening, plus the breadcrumb UI, help users learn the pattern and get used to it.

If you have more time, read on for more details on the concept. Leave your comments if this sparks more ideas in your mind on how to improve this UI/UX.

What’s the constraint with the thumb?

Understanding the mobile UX constraint (thumb!) is important because everything else flows from it. On desktop with a mouse reaching a button is the same low effort across the entire visible screen. On mobile you hold the phone in one hand, and your thumb sweeps a limited arc anchored at the bottom corner (so called “thumb zone” — we’ll assume right-handed for this article, while totally respecting left-handed people):

Reaching the top of a big phone with the same hand is hard.

So designing easy access / often used branching choices menu on mobile is less about “what looks nice” and more about “what can the thumb actually reach without the user re-gripping the phone?”

The FAB menu answers this well for the simple cases. One button in the corner, tap it, and a few (3) options are now within reach:

Enter branching choices. Let’s imagine you are playing a complex web game on mobile, and the moment the game needs to let you navigate between choices (actual game choices such as “Dice / Cards / Timer”), and “Dice” then needs to open into “d6 / d20” — the FAB menu does not work, as the next choices have no space to go, or will turn your screen into clutter. The usual answer will point at a bottom sheet, a dialog modal , or a nested list etc. …And all that throws away the thing that made the FAB menu good. You have to leave the thumb zone, and you lose the corner anchor.

For clarity, its not about “too many choices” on one level (there are ways to “paginate” many choices even on a radial FAB menu UI), the problem is multi level depth, and that is where the flat FAB menu fails.

Let’s make the choice become the button

I decided to challenge that and make the FAB menu work with an addition: what if the choice takes over and “becomes” the main button?

Instead of opening a new surface, the tapped child moves into the main button and becomes the parent. Its siblings fade away, the new main button pulses, and then that child’s own children fan out around it. You still have one button in the corner, but now the menu has moved one level deeper.

I call this move a “takeover.” To collapse the menu, you can tap the breadcrumb × or tap the main button again to “back out.” The motion is like a yo-yo: a child pulls into the center, its own children fling outward, and tapping the center reverses the whole sequence.

It’s easier to see than to describe. My theory is that if the motion is right, the user stops thinking in screens or menus and instead learns one object under one thumb. Depth becomes a feel: I went in, I went in again, now I’m coming back out. Try it here:

[embed]

Depth becomes a feeling — I went in, I went in again, now I’m coming back out . I did not polish the tactile feeling of it yet, but I think if the gesture is consistent, the user doesn’t need to learn the choices. They just learn one move, and now can navigate any tree.

Since it can still be overwhelming, it is best to teach users on simple trees first, and only later use it for deeper branching choices.

How I want it to feel — the choreography

The spirit of this pattern is the animation (BTW I used GSAP). With the right timing the motion sort of explains itself.

Forward (drilling in):

• The tapped child glides from its current position to the center and scales up to main-button size — fast launch, slow settle, so you can actually read what’s happening.
• The siblings fade and shrink a little as they leave.
• The center pulses (scale 1 → 1.12 → 1) to show the pull-in.
• Then the new tier of children fans out from the center with a small stagger — the fling-out.

Reverse (drilling out): The current ring collapses back into the center, we pop one level, and the parent’s ring re-spreads.

Then the end-action doesn’t navigate anywhere , i made the chosen button just wobble to confirm and stays put. Principle is that Navigation moves you; an action doesn’t. (For my web app for some actions I do make end-action collapse the whole fab-menu when it makes sense)

There’s one more detail worth calling out: The fan arc adapts to the number of children. With more buttons, the ring needs to open wider, otherwise the options crowd together and the thumb can’t tell them apart. For a bottom-right FAB menu, the arc always opens up and into the screen:

• 1 child — basically a point, sitting up-left
• 2 children — about 80°, left → up
• 3 children — 90°, left → up-left → up
• 4 children — 105°, left → up, with a slight spill to the right
• 5+ children — a wide 120° upper fan

The arc always opens away from the corner so the options land where the thumb is already going.

Finally, to help users “realize” what’s happening, we add a breadcrumb under the FAB menu. It’s optional but it helps users to visually learn the pattern: you can see where you are, tap any crumb to jump back to that level, or tap the leading × to collapse the FAB completely. It grows leftward as you go deeper, with each new step “bubbling” in.

How it’s built — the demo

The implementation is simple conceptually:

• The menu is a tree. Any node with children drills in. A node without children is a leaf action.
• Navigation is just a stack. Each drill-in pushes the tapped node, each back-out pops it. The current ring is always derived from the top of the stack, so depth is arbitrary and there are no hardcoded menu levels.
• The takeover is one animation timeline. The tapped child moves to the center, siblings fade away, the center pulses, and then the next tier fans out. The commit happens mid-timeline so the next ring starts moving before the pulse finishes.

GSAP’s timeline itself is the pattern here. You could swap engines, but the effect depends on that timing choreography more than on the specific library.

Wrap

Thumb zone is the cornerstone of mobile navigation, and making FAB menu work for a multi-level choices could require more creative approaches. Not yet saying mine is the most optimal (time will tell:), but I think it has potential. What do you think? If you saw other examples or creative solutions — please share in comments!