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

Breadcrumbs

The breadcrumb component gives users a sense of location within the overall website and allows them to easily navigate forward and back in the site hierarchy.

Usage

The breadcrumb component gives users a sense of location within the overall website and allows them to easily navigate forward and back in the site hierarchy.

Module specifications

  • Background color configurable
  • Copy color configurable
  • Can override default location-based to create custom breadcrumb links
  • Sits below the global header, or below the secondary navigation when it is present

Character counts (with spaces)

N / A

Example layouts

Backgrounds should generally be either Charcoal, White, or Transparent depending on the page. Ensure that color combinations are ADA compliant.

When filled with color, the component will sit above the hero module.

If left transparent, breadcrumbs will layer over the top of the hero module.

When the trail is longer than viewport it will trail off the left side of the canvas. User may pan within the breadcrumb to slide left or right to reveal previous linking.

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.