Header is a Box with a set of preset properties for introductory content.
Header is extremely versatile and can be built by mixing and matching a variety of components to provide users with relevant, interactive elements to navigate through or engage with an application.
When to use
Header is used to set the context for an application or a specific page within an application. It is a flexible element that can be composed of a variety of components to aid the user experience in an application.
Common use cases include:
When not to use
Do not use Header just as a means to display content in a row. The Header component translates to a
<header> in the DOM, so do not use Header in instances that do not align with the HTML header spec.
While Header is flexible in its composition, these anatomical elements are the most common:
Keep Header contents to a limited set of elements in order to:
- Provide the user with relevant, helpful actions regarding the application or page.
- Layout smoothly and responsively across all browser widths.
When using Header as a navigation structure, use Buttons as your navigational elements and wrap them in a
Nav component. This allows screen readers to identify this as a navigation region. For guidance, check out this example of an app header.
There are various action elements that may live in a Header, depending on the application or page context.
The Global Header, also known as the HPE Common Header and Footer Web Service, provides a tunable, yet consistent header and footer to be used across all HPE applications. For guidance, see documentation for Global Header.
An app header provides additional navigational structure that is app-specific.
If the application is not contained within the GreenLake ecosystem, the app header should contain an app identity on the left side of the header that:
- Contains brand logo and application/service name
- Links to the landing page of your application
On wider screens, the navigational buttons should display in a row. On mobile, these items will be collapsed into a Menu.
Some elements that are appropriate for an app header include:
- Application navigation structure
- Profile Avatar button that leads to account information
- Search field that searches entirety of the application
A PageHeader is a standardized layout component that sets the context for a single page within an application. For guidance, see documentation for PageHeader.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.