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.

Module Specs
Example layouts
Resources

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

For Zeplin access contact the UX Design Manager

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

Your Cart is Empty