Specifications
Anatomy
- 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.
- Without a label:
- 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.
- Background colors: Bottom navigation can we either white or Trimble Dark Blue.
Sizing
States
Selected
A bottom navigation item in a selected state.
Disabled
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.
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.
Editorial
- 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).