# Navigation

Navigation guides users through different parts of our websites or apps.

# Description

Our site navigation is always positioned at the bottom of the screen on mobile devices. This is to account for larger mobile devices, meaning every primary action is easy to press when using one hand. Bottom navigation menus are also used on our IOS and Android apps. The navigation bar remains in a fixed position no matter where the user is on our site.

The navigation bar consists of three to five items in the form of destination pages. Each destination is represented by an icon and a text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. On mobile landscape or tablet, the bottom navigation should fill the whole width of the viewport. The spacing between items should remain the same as in portrait mode.

# Rules

• Only use it on mobile or tablet devices
• Use between three to five items
• Always show one item as active on apps
• Have short, descriptive text label, e.g. "Home" or "Bag"
• Always use a supporting icon
• Always use the same font size
• Fill the width of the screen
• Don't allow items to scroll or move horizontally

# Accessibility

• Inactive states should have sufficient contrast.
• Icons should be accompanied with a label.
• On apps, text should scale for a someone using dynamic text, ensuring the nav bar doesn't break.