HP.com Design System HP.com Design System HP.com Design System

Secondary navigation

Secondary navigation should be used for product or service title, external page links and CTAs.

HP 3D Printers HP 3D Printers

HP OmniBook Next-Generation PCs HP OmniBook Next-Generation PCs

Usage

This is a reusable component used to deliver persistent shared navigation across all pages of a web section. Ideally, pages linked from the secondary navigation would feature the same secondary navigation component so the customer can easily browse across linked pages.

Module specifications

The bar will stay stuck to the top of the page.

Once the user scrolls past the sticky nav, the navigation bar should stay at the top of the page as the user scrolls down
If title is present, Nav Labels and CTAs appear inline, right aligned with TBD padding in between
CTA can appear on the right, after Nav Labels OR can appear after the title
If the user scrolls up on the page passing the sticky nav, the nav will no longer stay at the top
If there is more than one sticky nav on the page, the second nav will stick and replace the first. There will never be two shown at the same time.
Maximum 7 tabs

Character counts (with spaces)

Section Label - 30 max characters
Nav Label - 12 max characters
Nav Dropdown Label Text - 36 max characters

Example layout

DESKTOP

Default view

TABLET

MOBILE

Resources

If you need Zeplin access contact the UX Design Manager

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.