Side to Side Navigation

• 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.

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

Example coming soon.

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 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

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 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.

• 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.