Mobile menus

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.

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.

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.

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

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.

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

Pair any icons in a flyout with an appropriate label.

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

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

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

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.