HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
Guidelines
Examples
Card
List
DataTable
Templates

Drill Down Navigation

Allows users to progressively descend 'down' branches of a hierarchical tree into a child screen to drill down into more granular details.

Drill Down Navigation allows for a consistent and focused experience that helps eliminate cognitive overload.

When to use

  • When users need to focus on one task at a time.
  • To provide summary information with the ability to drill down into specifics.
  • When screen real estate is limited.
  • When designing for many levels of functionality.
  • To divide content into meaningful, focussed sections.
  • When the user is moving forward step-by-step to access further information.
  • When going from your Account > Services > Service.
  • To allow users to dive deeper into related content.

Guidelines

  • Can be used as an individual element or in groups of related content.
  • Each element should have its own single content.

Examples

Card

A visual representation of interactive and organized content.

A diagram illustrating drill down navigation within cards.
Illustration showing how Cards may be used to navigate from a central hub page to spoke pages of related content and/or more granular detail.
Cards
Groups with a distinct navigational purpose to a Hub or Spoke
Hub
A central index where activities can begin
Actions
Routes where tasks can be performed
Spoke
Visible details that pertain to the List Item

List

Lists provide access points that present a collection of organized and related content.

A diagram illustrating drill down navigation within lists.
Illustration showing how a user can navigate within a List by clicking an item and be navigated to a page of related content.
List Items
Content panels with a navigational purpose
Hub
A central index where activities can begin
Actions
Routes where tasks can be performed
Spoke
Visible details that pertain to the List Item

DataTable

Datatables present data in a column and row format. A user can be taken to a spoke when an entire table row is clickable or if an individual cell is clickable to drill down into more information.

A diagram illustrating drill down navigation within a DataTable.
Illustration showing how a user may click a DataTable row which navigates to another page with related content, such as a record's detail (spoke) or related hub.
DataTable Rows
Content panels with a navigational purpose
Hub
A central index where activities can begin
Actions
Routes where tasks can be performed
Spoke
Visible details that pertain to the List Item

Related

Related content you may find useful when using Drill Down Navigation.

HPE Navigation Preview

Navigation

The entry point for the expansive topic of Navigation.
Side-to-Side Navigation Preview

Side to Side Navigation

Allows users to access sibling screens sequentially from the same level of the hierarchy.
HPE Lists Preview

Matrix Navigation

Matrix Navigation is not a path that you can define for the user, rather the user defines it themselves.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page