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.
Anatomy
While Header is flexible in its composition, these anatomical elements are the most common:
Content restrictions
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.
Accessibility
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.
Variants
There are various action elements that may live in a Header, depending on the application or page context.
Global header
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.
App 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
Page header
A PageHeader is a standardized layout component that sets the context for a single page within an application. For guidance, see documentation for PageHeader.
Related
Related content you may find useful when using Header.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.