HP.com Design System 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

Figma

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