Navigation

XL and LG Breakpoints

MD and SM Breakpoints

1. Brand logo is a slot where the brand logo will be displayed.
2. Breadcrumbs toggle is an icon button that will display the breadcrumbs when it is clicked.
3. Main trigger is a navigation button that triggers the main product/page level.
4. Primary button is a CTA for actions such as “Get a demo” or “Connect with us”.
5. Breadcrumb trigger is a navigation button that triggers the secondary product/page level.
6. Close icon button allows to close the breadcrumbs.
7. Divider line separates options within a bar.
8. Parent tab menu is built with navigation buttons that contain the parent categories.
9. Parent page overview is a clickable overview of the parent category that will take the user to its main page. It applies to some categories but not all.
10. Child pages are clickable items that take the user to specific pages.
11. Compact menu is a hamburger menu that contains the navigation in compact viewports.
12. Parent/children list group is a list of tertiary buttons that set the parent label for each child.
13. Tertiary CTA appears at compact sizes instead of the primary CTA of the bar at the bottom of the list group.
14. Back icon button allows users to go back to the previous menu view.
15. Contextual way-finding title gives context to the section options being displayed.
16. Category title represents a main section of first-level options.
17. Page link is a group of link options that belong to a section or main category.

When to Use

Use the nested navigation as a secondary level of navigation.

When Not to Use

Don’t use the nested navigation to display first-level options. Use the top hat instead.

Nested Nav Bar

Nested Navigation Drawer

The caret-down for products and platforms will trigger a full-bleed dropdown. The background page will have an opacity-40 Neutral 80 overlay. The menu animates down from the top. When collapsed, use the caret-down icon. When the menu dropdown is visible, use the caret-up icon.

Each column of content can have a tertiary button with a brief description.

SM and MD Slide-In Menu

The menu becomes a slide-in menu that drills down into lower levels. When open, the menu will go edge to edge. This menu condenses all items under the hamburger menu. The first menu will be a list of the first-level items.

Intentional icon usage shows the user the expected action. Carets show a new slide-in and the direction they will appear from. An X icon is clicked or tapped to close a window.

Spacing

Ensure that proper space is given between each item in the container.

XL Breakpoint:

The menu is split into four even columns. Sections of content will flow underneath with a 24px gap between rows.

LG Breakpoint:

The menu is split into three even columns. Sections of content will flow underneath with a 24px gap between rows.

MD and SM Breakpoints

Hierarchy

A proper hierarchy must be ensured for the elements that compose the nested navigation bar and menu drawer. The nested nav bar should contain the first-level options, the parent tab menu the second level, and the child pages the third level of the navigation. The labels need to give a clear and short idea of what they represent.

Alignment

The alignment of components within the container will be left-aligned, except for the primary CTA and icon buttons in the compact viewports that are right-aligned.

The nested navigation will adjust to the viewport size. The bar will keep its height across the viewport sizes.

Nested Navigation Bar

When selecting the breadcrumb toggle, the usual behavior is to display the breadcrumbs, having a smooth animation of the main trigger at the right, showing the second level options. Always keep the elements left-aligned. All the elements are visible.

For the scenarios where the labels are long or the triggers need more space to be fully displayed when the breadcrumb toggle is selected; the primary CTA and the main trigger get hidden to give more space to the second level items while the user has the breadcrumbs visible.