Left Navigation

You probably know what Left Navigation is. For the 0.1% of you who do not: the Left Navigation panel links to important sections of the application, and contains app branding.

Web

When to Use

  • To access all main high-level sections of application.
  • To access to Home/top-level of the application.
  • To provide sense of place to the user (display the depth and breadth of the app/site.)

Appearance & Behavior

On web applications, the Left Navigation should always be open, and navigation items should only link to screens within the application (no external links). For items with secondary navigation, the hover state displays an arrow on hover. In order to maintain consistent and expected navigation, do not add new navigation items.

Left Nav

Dimensions

Left Navigation (web) is a fixed width (165px) and does not resize with the browser window or viewport.

Icons

There is one approved icon set, and teams should not modify, remove, or add additional icons. If the provided icon set doesn’t meet your application’s requirements, please contact the Design Council.

Secondary Navigation

If secondary items exist within a navigation item (and only if secondary items exist), the top-level item is not an actual destination. Clicking a navigation item with secondary navigation expands that item’s secondary navigation.

Left-Nav-secondary

If a secondary navigation item is selected, the primary navigation item loads as ‘open’, with the secondary navigation item highlighted. The secondary menu will remain in an open state until another navigation item is clicked. Once a secondary navigation menu is open, the hover state on the primary item no longer shows the button.

Tablet website

On a tablet, the application’s Left Navigation is collapsed by default (showing only icons) and opens on tap. Once a new page is loaded, the left navigation is again collapsed, but the icons shows as active.

iOS

When to Use

Apps should use drawer navigation when they require a scalable solution for their main application menu.

Appearance & Behavior

  • On an iPad and iPhone, the navigation drawer is accessed by tapping on the “hamburger” icon. Swiping the screen from left to right also opens the drawer, which slides out from left to right.
  • Link order and labels should align closely to the web experience – users expect this to be consistent.
  • Section headers may be used, as there is no progressive disclosure of subcategories, but are not required.

iPhone

  • To simplify the menu and to increase cohesiveness across the ecosystem, we recommend using mobile icons for each category without displaying the create icons next to each link.
  • Help and settings links should display at the bottom of the list.
  • Company name displays on the top of the menu (in the future, it can become a menu for switching companies within the app.)
iPhone Proposal

iPhone Proposal

iPad

iPad Left navigation

iPad Left navigation

Android

When to Use

Apps should use drawer navigation when they require a scalable solution for their main application menu.

Appearance & Behavior

Android follows Google’s design pattern: http://developer.android.com/design/patterns/navigation-drawer.html

  • The hamburger icon is smaller, and displays on the far left
  • The Application logo/name are used
  • An overflow menu is on the far right
  • To simplify the menu and to increase cohesiveness across the ecosystem, we recommend using mobile icons for each category.
  • Help and settings links should display in the action overflow:.
android

Text Guidelines

  • Capitalization of navigation items is Title Case
  • Created by
  • Last modified August 31, 2016 by Dexx Dorris
© Intuit 2016 | Terms of use