Skip to content
Pinky UI

mobile

Thumb-Reach Menu

A lower trigger fans a short action set upward so important choices stay in the natural reach zone on a large phone.

  • mobile
  • menu
  • thumb
  • fan
  • actions
Related pattern

Actions rise from the lower edge with a visible menu and Escape path instead of forcing a top-corner trigger.

Live preview

Quick usage

usage
import { ThumbReachMenu } from "@pinky-ui/systems";

<ThumbReachMenu items={actions} label="More actions" />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Thumb-Reach Menu places the trigger near the lower edge and fans a short action set upward. It is a useful alternative when actions are important on a large phone but a top-corner menu creates reach or context problems.

Use when

  • Three or four secondary actions belong to a local task.
  • The lower edge is already the user's working zone.

Interaction

Tap the lower trigger to open a vertical action group. Escape, selecting an action, tapping the trigger again and a visible close state all dismiss the group.

Accessibility

Expose aria-haspopup="menu", aria-expanded and menuitem semantics. Move focus into the first action on open and return it to the trigger on close.

Reduced motion

Show the action group immediately and retain the same focus order.

Tune

  • Keep the fan short enough to avoid reaching the status bar.
  • Use labels that make the action outcome clear.
Open this skill on its own page