Learn how to design an "Unconventional" Ambidextrous, Thumb Zone Friendly, Navigation Menu

I am a Mobile First web developer that explores concepts, designs and ideas that are innovative, unconventional and not based or limited by industry traditions!

To familiarize yourself with the analysis and process needed to design an Ambidextrous, Thumb Zone Friendly, Navigation Menu, you can either:

1Scroll Down the page

2Click or Tap any of the links in the Table of Contents

Table of Contents
What is the Thumb Zone?
Smartphone trends affecting existing Mobile Navigation Menus
The secret to designing an Ambidextrous, Thumb Zone Friendly, Navigation Menu
Experience an Ambidextrous, Thumb Zone Friendly, Navigation Menu
Features of my Ambidextrous, Thumb Zone Friendly, Navigation Menu
Examples of websites that use a Menu @ bottom of the screen

What is the Thumb Zone?

When you interact with your Smartphone USING ONLY ONE HAND, the "Thumb Zone" is an area on your Smartphone screen where your thumbs feel the most comfortable and are able to easily reach and interact with a mobile website navigation menu. The term was first coined by Steven Hoober, an expert in mobile interfaces.


The overlapping space at the bottom middle section of your Smartphone screen is your OPTIMAL THUMB ZONE AREA on your Smartphone screen!

Designing an Ambidextrous, Thumb Zone Friendly, Menu may appear to be a daunting task because the Thumb Zone Area changes depending on:

1The size of your hand.

2The size of your Smartphone screen.

3Research on mobile interaction and behavior shows that when Smartphone users hold their devices, they use different thumbs for interacting with a Mobile Menu:

The vast majority of mobile websites use a Hamburger Menu that is placed either on the Top Left or Top Right of a web page!

When the first iPhone was released in 2007, the Thumbs were able to reach and interact with the Mobile Menu!

Mobile devices with a display larger than 6.5 inches are no longer the exception. Web developers should make it a priority to design Mobile Menus for "One-Handed" use!


Learn how to design an Ambidextrous, Thumb Zone Friendly, Mobile Menu

The secret to designing an Ambidextrous, Thumb Zone Friendly, Navigation Menu

1CHANGE your CSS3 and HTML definitions and position the navigation menu on all of your webpages at the bottom of the screen!

2KNOW your Optimal Thumb Zone Area on a Large Screen Smartphone and use CSS Viewport Units on the top of your navigation menu.

3CENTER all Navigation Menu Categories and HTML Links.

Experience an Ambidextrous, Thumb Zone Friendly, Navigation Menu

Follow these instructions on a device other than your Smartphone

1OPEN this web page on a large screen Smartphone.

2TAP the M E N U link at the bottom of the screen.

3TAP the ABOUT Menu Category.

4USING ONLY ONE HAND can your Left and Right Thumbs reach all associated links?

5TAP the CONTACT Menu Category.

6USING ONLY ONE HAND can your Left and Right Thumbs reach all associated links?

7TAP the M E N U link at the bottom of the screen to return to the webpage.

Features of my Ambidextrous, Thumb Zone Friendly, Navigation Menu

This "Unconventional" Ambidextrous, Thumb Zone Friendly, Navigation Menu is not based on or conforms to what is generally done or believed in!

👍This Ambidextrous, Thumb Zone Friendly Navigation Menu provides website visitors a consistent browsing user experience that can adapt to any screen!

👍Is positioned at the bottom of the Smartphone screen.

👍It is both Transparent and Opaque to alert the user to Scroll Down to continue viewing additional Content, Menu Categories or Web Page Links that can not be displayed on the screen.

👍All Menu Categories and Links are "Centered" and optimized for "One-Handed" use!

👍Can also be used as a Mobile Mega Menu.

Examples of websites that use a Menu @ bottom of the screen

A simple 3 Links Bottom Navigation Menu
You can customize it to your own website requirements!


Paul L Ferguson
Another simple 3 links Bottom Navigation Menu is used on Desktop, Laptop and Mobile devices.


David Hellmann
A Mobile Only Navigation Menu

Call To Action

Design Mobile Navigation Menus that are designed for "One-Handed" use!
Would love to hear your comments, opinions and thoughts on this topic!

Top of Page