Components · Navigation
Product Navigation
The horizontal nav bar for a single product, with dropdown submenus, a “More” overflow menu, and a narrow-viewport form. The most structurally complex component in the system.
Figma source: Product Navigation ↗Examples
Product navigation bar
<nav class="cds-product-nav" aria-label="Sponsored Projects">
<a class="cds-product-nav__link is-active" href="/proposals" aria-current="page">Proposals</a>
<a class="cds-product-nav__link" href="/awards">Awards</a>
<button type="button" class="cds-product-nav__link" aria-expanded="false" aria-controls="nav-more">
More <span aria-hidden="true" class="fa fa-caret-down"></span>
</button>Figma properties
| Property | Values | Notes |
|---|---|---|
Nav Link → Active | On · Off | Current section. |
Nav Link → State | Default · Hover · Focus | Runtime state. |
Nav Link → "More" | Off · More-Open · More-Closed | The overflow menu trigger. |
Submenus → Expanding Menus? | Yes · No · None | Whether submenu sections expand in place. |
Submenus → Sections | On · SmallMediaQuery · Off | Whether submenu items are grouped under section headings. |
Submenus → Show Scroll Bar | boolean | For submenus taller than the viewport. |
Dropdown Items → MediaQuery | Full · Small | Wide and narrow viewport layouts. |
Behaviour, from the Figma annotations
Two interaction rules are annotated on the artboards, and both are corrections of behaviour that is easy to get wrong:
- The More menu must not open on hover. It opens on an “up event” — a mouse click, or Enter while focused. A menu that opens on hover fires as the pointer crosses it on the way somewhere else.
- The More trigger does not take the Active state when clicked. It takes Focus. Active means “this is the section you are in”; opening an overflow menu does not navigate anywhere, so claiming Active would misreport where the user is.
Hover-opened menus fail more than taste
They are unreachable by keyboard unless separately wired, they fire accidentally for anyone with a tremor or using a head pointer, and on touch devices the first tap becomes a hover that opens a menu the user did not want. Requiring an explicit activation, as the annotation does, fixes all three at once.
Usage
When to use it
- Show the sections of the current product only. Cross-product movement belongs in the Suite Header.
- Mark the current section with
aria-current="page"and the 3px underline. - Move items into “More” when the row would otherwise wrap.
- Group long submenus under section headings.
When not to use it
- Do not open menus on hover.
- Do not put more items in the bar than fit at 1440px.
- Do not mark the More trigger as active.
- Do not hide the current section inside the More menu.
Accessibility
- Menu triggers are
<button>witharia-expanded; destinations are<a href>. - Escape closes an open submenu and returns focus to its trigger.
- Clicking outside closes the menu; focus is not stolen.
- Where a submenu scrolls, it must be reachable and scrollable by keyboard.
- Label the
<nav>with the product name, so a page carrying both suite and product navigation has two distinguishable landmarks.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--navigation-active | Active underline and label | --primary-brand-color |
--navigation-disabled | Unavailable items | --disabled-text |
--menu-background | Dropdown surface | --color-white |
--menu-hover | Item hover | --color-gray-200 |
--container-border | Bar baseline | --color-gray-300 |