Skip to main content

Top Navbars

The top navbar provides context through globally accessible menu options.

Specifications

Anatomy

The top navbar is often used as the location for the primary menu and also provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

Navbar Anatomy

Variations

Top navbars can contain various elements and combinations of elements.

Navbar Variations

Transparent Top Navbar

Top navbar background can be transparent, giving the effect elements floating. Use FABS for the top navbar icons. Floating elements should have a dropshadow.

Navbar Transparent

Background Images

Top navbars can contain imagery only when the extended Nav Bar is used. Use images that compliment the legibility of the navbar text and icons.

Navbar Background Images

Color Options

Top navbar colors can be either White or Trimble Blue Dark Trimble Blue Dark

#004f83
#004f83
.

Navbar Colors

Editorial

  • Capitalize proper nouns.
  • Use title case for menu titles (e.g. Notifications).
  • Use sentence case for app descriptions and buttons (while preserving proper nouns).