Skip to main content

Header

Display the current screen title and host elements such as breadcrumbs, descriptions, tags, and buttons.

Headers have flexible and wide range of variants. You can also add a custom content.

Behavior​

  • The Page Header is positioned at the top of the page, directly below the OS Bar or Top Nav Bar.

  • It spans the full width of the content area.

  • Page Header transforms into a Sticky Bar once the user begins to scroll––keeping the header visible and accessible.

Usage​

  • The Page Header orients the user within the application.

  • It sets the context for the content below that helps users to understand the purpose of the page.

  • It provides access to key actions relevant to the entire page.

  • It often includes Breadcrumbs, which allow users to trace their path and easily navigate back to previous pages.

  • The Page Header is often used together with the Toolbar.

Page header with Tabs​

Instructional image

Page header with Toolbar​

Page header with a custom content​

Best practices​

  • Avoid displaying more than four actions in a row.

  • Display the key actions for the page directly in the Page Header, and place less important actions in the More button.

Do IconDo
Do Example
Don't IconDon't
Don't Example