# Bottom navigation

Our site navigation is always positioned at the bottom of the screen on mobile devices, meaning every primary action is easy to press when using one hand. Bottom navigation menus are also used on our iOS apps.

Do

  • Use it on mobile or tablet only
  • Use between three to five items
  • Always show one item as active
  • Have short, descriptive text labels, e.g. "Home" or "Bag"
  • Always use a supporting icon
  • Always use the same font size
  • Fill the width of the screen
  • Optimise the width of the tab items for larger screen sizes, e.g. landscape mobile, or tablet.

Don't

  • Don't allow items to scroll or move horizontally
  • Don't have an icon without a label

On mobile landscape or tablet, the bottom navigation should fill the whole width of the screen. The items can keep the same spacing used in portrait mode instead of being equally distributed on the navigation bar. Alternatively, the text label and icon for each item can be placed side by side instead of stacked vertically.

# Burger menu

This button is used to open a menu with a lengthy list of contents, i.e. commonly used website navigation - in our case that's shop categories.

Do

  • Use it once for our primary shopping navigation on mobile

Don't

  • Don't replicate the burger menu anwhere else on a page
  • Don't use it in combination with a bottom bar navigation (e.g. on iOS or Android)
Last Updated: 10/6/2020, 8:34:39 AM