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
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.
- 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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.