The page header is a pattern that helps define the uppermost part a webpage or product. The page header pattern is a template that helps combine other components (breadcrumbs, headings, actions, and selects) to create a consistent user experience.

The standard page header contains:

  1. Grid/page: The page or content area where the page header sits. Each page requires grid spacing to be set to account for page size and fixed/fluid pages.

  2. Breadcrumb: Breadcrumbs are an optional secondary navigation aid that shows users their current location in relation to the rest of the site.

  3. Title: Page title summarizes the page content. The title wraps onto multi-lines when using fluid grid alignment and is truncated when using fixed grid alignment.

  4. Buttons: Actions modify the page and its content. Use primary, secondary, subtle, compact, or other buttons defined in the button guidelines.

  5. Search bar/filter: The search bar / filter is an optional but common pattern in products. It allows users to refine the page content on a more granular level using a search or selects.