HP.com Design System HP.com Design System

In-page navigation

The In-page nav helps users navigate up and down through a recommended maximum of 8 different sections within a webpage.
Popular categories

Usage

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

Module specifications 

  • Label style, link, color, and hover state are configurable
  • A minumum of two labels is required, and a maximum of eight are recommended

Character counts (with spaces)

There is no character limit – at least 2 labels are required and with no maximum. However, it is not recommended to exceed 8 per navigation.

Example layout
Default Desktop
Default Tablet
Default Mobile

Resources

Reference

For Zeplin access contact the UX Design Manager

Download