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.

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:

• Global header
• App header
• Page header

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:

• Button
• Menu
• Search
• Heading
• Avatar

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:

1. Contains brand logo and application/service name
2. 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.