Navigation Styles and Usage
One of the single most important usability aspects of any digital products is that navigation is clear and consistent. Here we'll define how to make navigational areas recognizable and showcase some of the patterns we use to make them easy to discover and use.
|
Top Bar |
The navigation bar that sits at the top of the product view |
|
Side Navigation |
The primary navigation. The navigation is a vertical pane of links, placed on the left side of the product view and is capable of being hidden or minimized. |
|
Breadcrumbs (Optional) |
The current page and up to 2 parent links if applicable. |
|
Quick Links |
links or buttons usually accompanied with an action panel that allow the user to quickly access views. |
Menu Open Toggle:
Clicking this icon expands the main navigation from the left
Logo (Optional):
Client Logo
Breadcrumbs (optional):
Breadcrumbs provide context to the user's current view as well as the current views page hierarchy. We support up to two parent links in the Breadcrumbs. Breadcrumbs are optional and not required unless specified by the design team or product owner
Quick Links:
Quick Links are a series of icons, avatars and buttons that trigger events. Quick Links could include, notifications, search, support, chat, and manage profile options etc. It is up to the product owner to determine which quick links makes sense for a given product.
Logo (Optional):
Client Logo
Navigation Links:
Navigation Links
Menu Close Toggle:
Clicking this icon closes the main navigation
The opening and closing of the menu should be smooth and use an easing function.
Hover states for menu items change the font color to the same Blue5 that we use for our default and neutral button hover states . We also change the background color to Gray3
When a user is on a page and that page has a link represented in the main menu, we want to indicate that this link in the menu is the page that is being viewed. To do this we add a small visual indicator to the left of the menu item. This visual indicator is very similar in shape and behavior as our selected states for Tabs
Icons are optional and not required. If icons are used they must follow our icon guidelines for applications
