Side Navigation

Specifications

Placement

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

Shadows

• Use Level 2 shadow on the right side of the side nav

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.

• Blue Navbar with white Side Navigation.

• White Navbar with blue Side Navigation.

Padding and Spacing

Typography

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