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

Call 1-877-811-1417 Have an expert contact me
Follow Us

HP 3D Printers HP 3D Printers

Call 1-877-811-1417 Have an expert contact me
Follow Us

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

Reference

For Zeplin access contact the UX Design Manager

Download