Side Navigation

Vertical, collapsible navigation on the left side of the application.

Overview

The side navigation of an application provides context through accessible menu options and positions a consistent component to connect to various pages in the application.

The side navigation is a collapsible side content of the site’s pages. It is located alongside the page’s primary content. The component is designed to add side content to a fullscreen application. It is activated through the “hamburger” menu in the Navbar.

There are other types of navigation that can be used along with the Side Nav: Breadcrumbs, Navbar, Tabs, Content Tree

Usage

Use when

  • You need to navigate between multiple, static pages within the application.

Don’t use when

  • Your application only has one page of content.
  • You need to provide page-specific actions (such as Save, Edit, etc.). Use a Toolbar instead – Coming soon!
  • Navigational items need to be loaded.
  • You need to show a content tree. Use a Content Tree instead.
  • Items in the side nav need to open dialogs.
  • You’re designing for a mobile application - use the mobile specific side navigation – Coming soon!

Types

When the side nav is actively being used by the user, it expands to full width This expanding functionality either a.) overlays the page’s content or b.) pushes the page’s content.

  • Do not use both types in one application. If a user navigates from one application to another, use the same side nav type across both products.

  • When the side nav is not active, it is either collapsed or hidden.

  • The expanded menu overlaps the content of the page.

  • Use this type of side nav, when the content on the page is difficult to resize.

Push Side Nav

  • The expanded menu pushes the content of the page.

Specifications

Placement

  • The side navigation menu is the top most element.
  • The footer displays under the side navigation menu.

Shadows

Icons

  • Leading icons are required for all items in the side navigation.
  • All menu items must have a unique icon. When the menu is collapsed, only icon and an optional chevron are visible. The user needs to be able to distinguish between each item by icon alone.

Sizing

  • Dynamic menu width depends on the longest menu item (padding to be retained).
  • Max width of the menu is 256px.
  • If the menu text is too long, truncate it and show full menu item name on hover.
  • The side nav does not support allowing the user to resize its width.

Colors

There are two color options available. They can be used in the following combinations:

  • White Navbar with white Side Navigation.

White Navigation

  • Blue Navbar with white Side Navigation.

Blue & White Navigation

  • White Navbar with blue Side Navigation.

Blue & White Navigation

White Nav ColorsBlue Nav Colors
Background White Gray 10
#ffffff
#171c1e
Blue Dark
#0e416c
Selected Item Background Trimble Blue Highlight Blue
#0063a3
#171c1e
Blue Light
#217cbb
Text Link Trimble Gray White
#252a2e
#fff
White
#ffffff
Hover Link Gray 0 Gray 8
#e0e1e9
#464b52
Trimble Blue
#0063a3
Icon Trimble Gray White
#252a2e
#fff
or Gray 5
#7d808d
White
#ffffff
Chevron Trimble Gray White
#252a2e
#fff
White
#ffffff

Padding and Spacing

ClassPropertySize (px/rem)
Menu Itemheight48/3
Menu Itempadding-left20/1.25
Menu Item Iconwidth, height24/1.5
Collapsed Menu Itemwidth64/4
Collapsed Menu Item Chevronwidth, height16/1
Extended Menu Itemwidth256/16
Extended Menu Item Iconpadding-right16/1
Extended Menu Item Chevronpadding-right4/0.25

Spacing

Typography

ClassTypeSize (px/rem)Font Weight
Menu ItemBody 114/0.875Regular/400
Back Menu ItemBody 212/0.75Regular/400
Level HeaderHeading 414/0.875Semi-bold/600

Behaviors

  • On load, show a collapsed menu (recommended).
  • The side nav supports up to 3 levels of navigation.
  • Clicking a menu item with sub items opens the side nav to its full width.
  • Clicking the hamburger menu opens the side nav to its full width.
  • When the user has clicked on a side nav link, the side nav collapses and the user is navigated to the specified content. If the user clicks outside of the side nav, the side nav collapses.
  • Hovering over a menu item icon displays a tooltip with the menu item name. When the menu is collapsed, hovering over the icon displays a tooltip. In the expanded view, if the menu item’s name is too long (truncated to fit the width of the side nav), display a tooltip with the menu item’s full name. Follow the Tooltip guidelines for further reference.
  • If the user clicks on a folder, that level of navigation slides out and is replaced with the next level of navigation under that folder.
    • The folder’s name appears on top of the side nav to let the user know their location or level.
    • To return to the previous level, the user may use the back button on top of the side nav.

Animation

  • Ease in: 250mm; Ease out: 200mm
  • The side nav slides in from the left to the right, when the menu is expanded or opened.
  • The side nav slides in from the left to the right, when the user navigates to the next menu level.
  • The side nav slides in right to left, when the user clicks a back button.

Responsiveness

BreakpointValue (px/rem)ExpandedCollapsed
X-Small320/20OverlayHide Menu
Small576/36OverlayHide Menu
Medium768/48OverlayHide Menu
Large992/62Overlay or PushHide or Collapse
X-Large1200/75Overlay or PushHide or Collapse
XX-Large1600/100Overlay or PushHide or Collapse
What's Changed
DateVersionNotesContributors
03/14/20221.3.0New pattern added.J. Wittmeyer, C. D. Savio Lazaro, S. Taylor, J. de Wit, E. Gunther, T. Manham,
N. Cadsawan, P. Karukkuvel, E. Deleon, A. Tucker, L. Meskanen-Kundu