Skip to main content

Bottom Navbars

Bottom navigation bars allow movement between primary destinations in an app.



Bottom Navbar Anatomy

Bottom Navbar Atoms

  • Icon: Bottom navigation items should always have icons. Icons provide metaphors for quick visual reference and help to reinforce a product’s navigation. Icons also help to supplement labels, for better comprehension.
  • Label: It is recommended that Bottom Navbar items should always have labels along with icons. Font size should be fixed at 12px. Avoid long lables, if necessary change padding when label wraps to 2 lines. CAUTION: Bottom navigation without labels will not be accessible.

Bottom Navbar Labels

  • Without a label:

Without Labels

  • Label position: Labels should usually be placed under the icons. Bottom navigation items have an option for side labels when in landscape mode or on a tablet. This helps to utilize the available horizontal space more effectively. When using this option, items in the navigation are horizontally distributed.

Label Position

  • Background colors: Bottom navigation can we either white or Trimble Dark Blue.

Bottom Navbar Background Colors


Bottom Navbar Sizing



A bottom navigation item in a selected state.

Bottom Navbar Selected State


A bottom navigation item in a disabled state shows that an item exists but is not available. This state can be used to maintain layout continuity and to communicate that the item may become available later. Don’t disable a bottom navigation item unless absolutely necessary.

Bottom Navbar Disabled State

Notification badges

Bottom navigation items can be given notification badges for indicating status or important information. Be mindful of how frequently you notify users and what type of content should trigger a notification badge, to avoid causing users to ignore badges altogether.

Bottom Navbar with Notification Badges


  • All buttons in the Modus Design System employ sentence case.
  • Label a button with a verb, like “Copy”, or verb-phrase, like “Copy document.”
  • Strive for short button labels that clearly describe an action.
  • Try to limit button labels to three words or less. Using one or two words, if possible, is ideal.
  • When writing buttons, you can remove most prepositions and articles (e.g. a, an, the).