HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
HPE local header example
HPE Global Header example
Global Header guidelines
Persistent sidebar
Tabs example
Tab guidelines
Templates

Side to Side Navigation

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

When to use

  • Tabs to maneuver between relevant information within the same view.
  • Hamburger menus, sidebars, nav bars, wizards.
  • Switching from one service to another service.
  • Sidebar to navigate between pages.
  • Accordions to open a single panel to navigating between content within the same page.

HPE local header example

The HPE product’s local header which contains grouped, frequently used and top-level information.

Example coming soon.

HPE Global Header example

The Global Header, also known as the HPE Common Header and Footer Web Service, provides a tunable, yet consistent header to be used across all HPE applications.

For more information, reference the Global Header page.

Global Header guidelines

  • Global Header should be on all applications and websites
  • Allows users to move between top-level important destinations
  • Located at the top of all application and websites
HPE Global Header

Persistent sidebar

Important note: The Sidebar component will likely be deprecated from the HPE Design System by end of 2022.

  • Provides navigation to top level pages.
  • Always placed below the Global Header.
  • Determined in a September 2021 user study that navigating between services using a Sidebar was not as seamless or clear when compared to other navigation models.

Tabs example

Tabs are a persistent horizontal bar that is used to navigate between related content without leaving the current page. See the Tabs page for more guidance and examples.

Tab guidelines

  • Use only nouns or verbs for labels.
  • Use concise 1-2 word labels.
  • Use Title Case.
  • Avoid nested Tabs.
  • Organize information by priority and reading direction (e.g., right to left) of the user.
  • Ensure first tab is active when arriving at the page.
  • Keep users on same page when navigating between Tabs.
  • Use 5-7 Tabs max.
Diagram illustrating how Tabs can provide side-to-side navigation between various sets of related content.
Diagram illustrating how Tabs can provide side-to-side navigation between various sets of related content.
Tabs
Tabs are lateral sections that control which content you see.
Interaction
Click and reveal content.
Content
Related content that can be divided into sections to present information within the same page.

Related

Related content you may find useful when using Side to Side Navigation.

HPE Navigation Preview

Navigation

The entry point for the expansive topic of Navigation.
HPE Dashboards Preview

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.
HPE Lists Preview

Matrix Navigation

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

Tabs

Tabs are graphical elements usually arranged like column headings. They allow a user to access various sets of content without leaving their current page.

Still have questions?

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

Edit this page