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

Anchor navigation

The anchor nav helps users navigate up and down through maximum of 8 different sections within a webpage. Anchor nav can also house up to 2 CTA's.

Learn

Usage

This module is typically placed below the hero module.  If a secondary nav also appears on the page, the anchor nav is dominant and will push the secondary nav off-screen as the customer scrolls.

Module specifications 

  • Supports dynamic pricing (pulled from store)
  • Background, link, and state bar colors are configurable
  • If there is no CTA, labels will center within nav

Character counts (with spaces)

This is one of the few components that does not have a character limit, however we do ask that marketing use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts

DESKTOP
TABLET
MOBILE

Resources

Reference

For Zeplin access contact the UX Design Manager

Figma

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