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

Download