Navbar

The navbar provides context through globally accessible menu options.

Overview

The navbar or the app header provides context through globally accessible menu options and positions a consistent component to connect various Trimble applications. It contains the main navigation for your application.

Usage

Use when

  • Designing hybrid and web applications.
  • Positioning a primary navigation menu.
  • Branding an application.
  • Providing access to
    • An account profile, other applications, help content, notifications, and search.
    • Positioning a consistent component to connect various Trimble applications.

Don’t use when

  • Building native applications following platform specific user interface guidelines.
  • Building desktop applications employing frameworks similar to Windows Ribbon.
  • Building marketing websites.
  • Building email templates.

Specifications

  • Navbar background color should be white or Trimble Dark Blue.
  • Divider line: use a 1px bottom border when there is a sub-header or side panel or when page background is white (rather than the standard Trimble Gray Light).
  • Shadow: use Level 2 shadow in the event page content scrolls behind and underneath the header. Level 3 shadow should be used for menu overlays.
  • Product logo and Profile avatar are the only required elements. Other elements are optional and contextual.
  • Product name should be used in the header communicated via an approved logo. The product logo is relevant to the company brand providing the service (e.g., Trimble, Tekla, SketchUp, Viewpoint) and follows Trimble product logo guidelines.
    • Don’t use the Trimble corporate logo.
    • Don’t combine the Trimble corporate logo and name of the application.
    • Don’t use the Trimble corporate logo and a customer logo side-by-side.
  • Customer logos: some existing applications allow for a customer logo replacement.
  • Only a single product logo should display in the header.
  • Solid icon style should be used in the header (for consistency across apps).
  • Display order of app header elements:

For left-to-right languages:

  1. Main menu: contains primary navigation for the current application.
  2. Product logo (required)
  3. Dropdown: used for global content only (e.g. selecting a project)
  4. Search: global search for the app (not section or feature specific); any additional buttons should be placed in-between Search and Notifications
  5. Notifications
  6. Help
  7. Apps
  8. Profile (required)

For right-to-left languages display order should be reversed.

  • Disallowed Content: information that should not appear within the app header bar.
    • Page titles
    • Navigation elements such as breadcrumbs, tabs, horizontal menu items, etc.

Color Options

Navbar background color can be white or Trimble Dark Blue.

Color Options

Key Measurements

Key Measurements

ElementWidthHeight
Header blockVaries56px
Product logoVaries24px (max-height 32px)
Navbar button target area48px48px
Icon button fill effect (border-radius 2px)48px48px
Profile avatar32px32px
Icon canvas size24px24px

Spacing

  • Elements should be vertically-centered within the header.
  • Icon areas starting from the Profile avatar are flush against each other.
X-Small (320px) breakpointArtboard follows 16px margins and gutters
All other breakpointsArtboard follows 24px margins and gutters
Menu icon area8px from left; X-Small breakpoint only: 4px from left
Product logo/ name64px from left; X-Small breakpoint only: 60px from left
Profile avatar icon area16px from right; X-Small breakpoint only: 8px from right

For additional reference, follow Grid & Spacing guidelines.

Behaviors

  • The navbar is a fixed element. Fixed or “sticky” content fixes itself to the browser viewport as content is scrolled.
  • Responsive design: navbar follows the Modus breakpoint guidelines in Grid & Spacing.
  • Three color options are available; Trimble Gray, Gray (Gray 6), and reversed (to be used with Trimble Dark Blue Navbars).
  • Common Navbar button options include but are not limited to:
    • Menu button
    • Search
    • Notification
    • Help
    • App Switcher
    • Profile

Navbar Button Examples

Navbar Button State Examples

Element Consolidation

At smaller viewpoints, some header elements consolidate into the overflow menu.

Navbar Responsive Design

Consolidate

  • Applications
  • Help
  • Notifications

Don’t consolidate

  • Profile avatar
  • Search
  • Main menu

Logo Adaptations

At smaller viewpoints, the product logo may

  • Reduce down to only the logomark;
  • For smallest width header, omit the logo entirely (when the header dropdown exists).

Tooltips

Tooltips display on hover. Follow the Tooltip guidelines for further reference.

Navbar tooltips

  • On hover, display a tooltip reading “Main menu.”
  • Expand/ collapse the Primary Navigation Sidebar when clicked or tapped.
  • Display the application’s homepage when clicked or tapped.

Navbar search

  • On hover, display a tooltip reading “Search.”
  • Expose the search overlay.
  • Search overlay:
    • Follow the Inputs guidelines.
    • Clicking or tapping input field “x” icon removes user-entered text.
    • Clicking or tapping search tray “x” icon hides the search tray.
  • Search
    • Suggestions display as a person types.
    • Pressing the Enter key displays the search results page.

Notifications

Specific to each product’s implementation

  • On hover, display a tooltip reading “Notifications.”
  • Display the Notification menu when clicked or tapped.
  • Clicking or tapping outside of this menu will close the menu.

Help

Specific to each product’s implementation

  • On hover, display a tooltip reading “Help.”
  • Display the Help menu when clicked or tapped.
  • Clicking or tapping outside of this menu will close the menu.

Applications

  • On hover, display a tooltip reading “Applications.”
  • Display the App Switcher menu when clicked or tapped.
  • Clicking or tapping an app row will open that application in a new browser tab.
  • Within a browser tab, if the current open application is the same as the one chosen from the app switcher, remain in the browser tab.
  • Contents:
    • App row(s) with app tile graphic and text label;
    • Optional description text (if used, all rows would have a tagline)
  • Clicking or tapping outside of this menu will close the menu
  • Menu overlay specs:
    • 24px padding (all sides)
    • 16px padding (all sides At X-Small, 320px breakpoint)
    • 8px between app row items
    • 384px max-width
  • App row specs:
    • 4px padding (all sides)
    • 2px border radius:
    • Use a 48x48px app tile
    • Text label specs:
      • 12px left of app tile (8px right margin)
      • Primary label:, Body’ semibold
      • Optional description, ‘Small body’ regular

App Tile Guidelines

  • App tiles may belong to a software suite family (e.g., Connect Suite or Tekla Suite).
  • Use the relevant app tile or modified app tile for the suite.
  • Position branded family app tiles next to each other in the app switcher list.
  • Reference the latest Buildings App Icon Standards document for more detail.

Profile

Used only for “global” MyTrimble account items. Appears consistently everywhere for anyone with a Trimble ID (should not be product specific).

  • Individual product navigation and preferences/settings will need to live in a “local” component/environment

  • On hover, display a tooltip reading:

    • MyTrimble:
      First-name Last-name
      email@address.com
  • Display the Profile Menu when clicked or tapped

  • Profile Menu:

    • Contents:
      • Profile symbol (Initials or avatar)
      • First and Last name
      • Email address
      • Navigation to ‘Access to MyTrimble’ (opens new browser tab)
      • Navigation to ’Sign out’
    • Clicking or tapping outside of this menu will close the menu
    • Specs:
      • 24px top and bottom padding
      • 48px left and right padding
      • 384px max-width
      • Inspect design file more detail

Editorial

  • Header bar uses icons to visually communicate meaning. See Tooltips guidelines.
  • Capitalize proper nouns.
  • Use title case for menu titles (e.g. Notifications).
  • Use sentence case for app descriptions and buttons (while preserving proper nouns).
What's Changed
DateVersionNotesContributors
05/26/211.1.0New pattern added.S. Williams, C. Christison, E. Gunther, J. Dong, K. Tran, N. Cadsawan, S. Taylor
03/14/221.3.0Updated accessibility guidelines and example images.S. Kaukonen, E. Nowak