Navigation (secondary)

A secondary navigation is a group of links and menus placed in a bar container that spans the width of the browser window.

A secondary navigation is divided into three slots. It is not required to use all three slots.

• Logo (logo) - includes primary elements, like a linked logo or a product name
• Navigation (nav) - includes navigation elements, such as inline links, menus, and external links
• Call to action (cta) - includes a call to action, typically the default variant (optional)

On small breakpoints, elements in the nav slot will collapse into an accordion within a menu (also called the mobile-menu slot). Optional elements in the cta slot will be placed below the accordion or hidden completely.

The expandable menu is an area where content can be placed like text, links, calls to action, and more. The menu requires a backdrop so it can separate itself from the page underneath, this helps users focus on the menu content.

A secondary navigation is available in both light and dark schemes. The light scheme background includes a box shadow whereas the dark scheme background includes a gray bottom border.

The light scheme secondary navigation should be used in environments with a lighter look and feel. The box shadow is always visible unless covered by an expanded menu.

The dark scheme secondary navigation should be used in environments with a darker look and feel. The gray bottom border is always visible unless covered by an expanded menu.

A secondary navigation spans the entire width of a browser window on all breakpoints. It has a fixed height of 86px on large breakpoints and a fixed height of 80px on small breakpoints even if the logo slot’s text is only one line. Content in all slots is horizontally centered with the background.

An expandable menu includes content like text, links, calls to action, and more. The menu tab, panel, and backdrop have the same styles on all breakpoints.

The amount of space in a secondary navigation remains about the same on all breakpoints.

Interaction states are visual representations used to communicate the status of an element or pattern.