Refine By

Mobile menus

  • Contents:

Mobile menus:

  • Help users navigate responsive websites and mobile apps
  • Give users the best cross-platform navigational experiences through a variety of methods

Icon bar

 

Icon bars make it easy to switch between top-level views with one tap.

In apps, they are primarily used as bottom navigation. On responsive websites, they are primarily used as a top navbar.

Use an icon bar when nav items require direct access from anywhere within the experience.

An icon bar as presented on a responsive website.
An icon bar presented as bottom nav in a mobile app.

Keep icon bars short:

  • Use only three to five elements
  • Consider using tabs if there are only two elements.
  • For more than five elements, consider using an overflow menu for secondary nav items.
An icon bar with secondary nav items tucked into an overflow menu

Pair each icon with a label.

Keep the labels short so they do not wrap or truncate.

Ensure icon bars do not scroll.

Icon bars may be persistent (fixed) or hide dynamically when scrolling within the view.

A bottom nav should hide when the device keyboard is engaged.

This bottom nav automatically hides when the device keyboard is active.

Flyout nav & app drawers

 

Flyout menus:

  • Only appear when triggered from a source element (like an icon)
  • Should not be used on desktop – they’re a mobile-only pattern
  • Show focus by darkening the background
  • Usually span the view height
Flyout menu on a mobile website

Be sure the touchable area of the menu’s source element – and each link within the flyout – are big enough to be usable. The minimum recommended touch area is 38 pixels.

A demonstration of appropriate line height in a flyout menu

Avoid wrapping or truncation of your link labels: keep them short.

Pair any icons in a flyout with an appropriate label.

icons paired with appropriate labels in a flyout menu

Provide a quick, easy, and obvious way to close the flyout.

Scrollable tabs

 

Scrollable tabs:

  • Consist of a single row of tabs that extend past the view width
  • Provide an alternative to flyout menus and bottom navs on mobile
  • Stay persistent throughout an app’s view
A scrollable menu in a mobile application

Ensure the user can navigate between views by swiping the tabs.

A scrollable tab menu should visually communicate its scrollability by extending one element past the view width.

Make the scrolling function clear to the user: visually cut off one element in a scrollable tab menu.

Labels should be short enough not to wrap or truncate.

a scrollable tab menu with labels short enough to avoid text wrapping or truncation

Accessibility

 

Related elements

Related components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 4:58pm Initial content entry