Skip to content

PageHeader

James Talton edited this page Jan 5, 2023 · 10 revisions

The PageHeader is used at the top of each page. It provides a consistent layout of header elements. PageHeader enables the responsive layout of the header.

<PageLayout>
  <PageHeader
    breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
    title='Page title'
    description='Page description'
    headerActions={<TypedActions actions={actions} />}
  />
  ...
</PageLayout>
Prop Type Description Location
navigation ReactNode Page sub-navigation. top
breadcrumbs Breadcrumb[] The breadcrumbs for the page. top left
title string The title of the page. left
titleHelpTitle string The title of help popover.
titleHelp ReactNode The content for the help popover.
description string The description of the page. bottom left
controls ReactNode Support for extra page controls. top right
headerActions ReactNode The actions for the page. bottom right
Clone this wiki locally