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 and White Navigation

  • White Navbar with blue Side Navigation.

White and Blue Navigation

White Nav ColorsBlue Nav Colors
BackgroundWhiteBlue Dark #0E416C
Selected Item BackgroundTrimble Blue #0063a3Blue Light #217cbb
Text LinkTrimble Gray #252a2eWhite
Hover LinkGray 0 #e0e1e9Trimble Blue #0063a3
IconTrimble Gray #252a2eWhite
ChevronTrimble Gray #252a2eWhite

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-right 4/0.25

Spacing

Typography

ClassTypeSize (px/rem)Font Weight
Menu Item Body 114/0.875Regular/400
Back Menu ItemBody 212/0.75 Regular/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 his/ her 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 Push Hide or Collapse
X-Large1200/75Overlay or Push Hide or Collapse
XX-Large1600/100Overlay or Push Hide or Collapse

Accessibility

  • Use unordered list <ul> groups for side navigation.
  • Place side navigation (the list group) in a nav element. The nav element should also be marked with aria-label="side navigation" to clearly describe the type of navigation.
  • Use the aria-current="true" attribute to indicate the item that is currently selected, or—in a navigational context—use aria-current="page" to indicate the page that is currently selected. The aria-current attribute should be updated when the user makes a selection.
  • Make sure the tab order matches the hierarchy and that the user can navigate through all levels and items with a keyboard.
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