PageHeader

PageHeader determines the top-level headings of a UI.

Page navigation navigation

React

readyReviewed for a11y

The PageHeader arranges elements that apply context and provide navigation for the current page.

The elements within PageHeader are rearranged and displayed accordingly depending on the viewport size and context of the page.

React examples

Title only

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Title</PageHeader.Title>
  </PageHeader.TitleArea>
</PageHeader>

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Title</PageHeader.Title>
  </PageHeader.TitleArea>
</PageHeader>

With a description

<PageHeader role="banner" aria-label="Add-pageheader-docs">
  <PageHeader.TitleArea>
    <PageHeader.Title>add-pageheader-docs</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.Description>
    <Text sx={{fontSize: 1, color: 'fg.muted'}}>
      <Link href="https://github.com/broccolinisoup" sx={{fontWeight: 'bold'}}>
        broccolinisoup
      </Link>{' '}
      created this branch 5 days ago · 14 commits · updated today
    </Text>
  </PageHeader.Description>
</PageHeader>

<PageHeader role="banner" aria-label="Add-pageheader-docs">
  <PageHeader.TitleArea>
    <PageHeader.Title>add-pageheader-docs</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.Description>
    <Text sx={{fontSize: 1, color: 'fg.muted'}}>
      <Link href="https://github.com/broccolinisoup" sx={{fontWeight: 'bold'}}>
        broccolinisoup
      </Link>{' '}
      created this branch 5 days ago · 14 commits · updated today
    </Text>
  </PageHeader.Description>
</PageHeader>

With actions

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Title</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.Actions>
    <IconButton aria-label="Workflows" icon={WorkflowIcon} />
    <IconButton aria-label="Insights" icon={GraphIcon} />
    <Button variant="primary" trailingVisual={TriangleDownIcon}>
      Add Item
    </Button>
    <IconButton aria-label="Settings" icon={GearIcon} />
  </PageHeader.Actions>
</PageHeader>

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Title</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.Actions>
    <IconButton aria-label="Workflows" icon={WorkflowIcon} />
    <IconButton aria-label="Insights" icon={GraphIcon} />
    <Button variant="primary" trailingVisual={TriangleDownIcon}>
      Add Item
    </Button>
    <IconButton aria-label="Settings" icon={GearIcon} />
  </PageHeader.Actions>
</PageHeader>

<PageHeader role="banner" aria-label="Pull request title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Pull request title</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.Navigation>
    <UnderlineNav aria-label="Pull Request">
      <UnderlineNav.Item icon={CommentDiscussionIcon} counter="12" aria-current="page">
        Conversation
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={3} icon={GitCommitIcon}>
        Commits
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={7} icon={ChecklistIcon}>
        Checks
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={4} icon={FileDiffIcon}>
        Files Changes
      </UnderlineNav.Item>
    </UnderlineNav>
  </PageHeader.Navigation>
</PageHeader>

<PageHeader role="banner" aria-label="Pull request title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Pull request title</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.Navigation>
    <UnderlineNav aria-label="Pull Request">
      <UnderlineNav.Item icon={CommentDiscussionIcon} counter="12" aria-current="page">
        Conversation
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={3} icon={GitCommitIcon}>
        Commits
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={7} icon={ChecklistIcon}>
        Checks
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={4} icon={FileDiffIcon}>
        Files Changes
      </UnderlineNav.Item>
    </UnderlineNav>
  </PageHeader.Navigation>
</PageHeader>

With leading and trailing visuals

Leading visual guidelines

Trailing visual guidelines

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.LeadingVisual>
      <GitPullRequestIcon />
    </PageHeader.LeadingVisual>
    <PageHeader.Title>Title</PageHeader.Title>
    <PageHeader.TrailingVisual>
      <Label>Beta</Label>
    </PageHeader.TrailingVisual>
  </PageHeader.TitleArea>
</PageHeader>

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.LeadingVisual>
      <GitPullRequestIcon />
    </PageHeader.LeadingVisual>
    <PageHeader.Title>Title</PageHeader.Title>
    <PageHeader.TrailingVisual>
      <Label>Beta</Label>
    </PageHeader.TrailingVisual>
  </PageHeader.TitleArea>
</PageHeader>

With leading and trailing actions

Leading action guidelines

Trailing action guidelines

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Title</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.LeadingAction>
    <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
  </PageHeader.LeadingAction>
  <PageHeader.TrailingAction>
    <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
  </PageHeader.TrailingAction>
</PageHeader>

<PageHeader role="banner" aria-label="Title">
  <PageHeader.TitleArea>
    <PageHeader.Title>Title</PageHeader.Title>
  </PageHeader.TitleArea>
  <PageHeader.LeadingAction>
    <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
  </PageHeader.LeadingAction>
  <PageHeader.TrailingAction>
    <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
  </PageHeader.TrailingAction>
</PageHeader>

The previous examples are a small subset of the full capabilities of the PageHeader component. For more in-depth examples that demonstrate responsive behavior and show realistc use-cases for GitHub, see the PageHeader Storybook stories.

Props

PageHeader

Name	Default	Description
aria-label		`string \| undefined` A unique label for the rendered landmark
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden. The component can be hidden for all viewport widths, or specified viewport widths. Some children have a default value for this prop: `PageHeader.ContextArea`, `PageHeader.ContextAreaActions`, `PageHeader.ContextBar`, and `PageHeader.ParentLink` are hidden on regular and wide viewports by default. `PageHeader.LeadingAction`, and `PageHeader.TrailingAction` are hidden on narrow viewports by default.
role		`AriaRole` The ARIA role to assign to the top-level node of this component.
sx		`SystemStyleObject`
as	`"div"`	`React.ElementType`
hasBorder		`boolean` Whether to render a border below the PageHeader. This border will NOT be rendered if the PageHeader has a `PageHeader.Navigation` child that is not hidden at the current breakpoint.

PageHeader.ContextArea

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.ParentLink

Name	Default	Description
aria-label		`string \| undefined` A unique label for the rendered landmark
className		`string \| undefined` CSS string
href		`string` The URL to link to.
hidden	`{ narrow: false regular: true wide: true }`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the parent link is hidden.
sx		`SystemStyleObject`

PageHeader.ContextBar

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.ContextAreaActions

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.TitleArea

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
variant	`medium`	`\| 'subtitle' \| 'medium' \| 'large' \| { narrow?: \| 'subtitle' \| 'medium' \| 'large' regular?: \| 'subtitle' \| 'medium' \| 'large' wide?: \| 'subtitle' \| 'medium' \| 'large' }` Default title (medium) is the most common page title size. Use for static titles in most situations. Large variant should be used for user-generated content such as issues, pull requests, or discussions. Subtitle variant can be used when a PageHeader.Title is already present in the page, such as in a SplitPageLayout.
sx		`SystemStyleObject`

PageHeader.LeadingAction

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.LeadingVisual

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.Title

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`
as	`"h2"`	`React.ElementType`

PageHeader.TrailingVisual

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.TrailingAction

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.Actions

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader.Description

Name	Default	Description
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

Name	Default	Description
aria-label		`string` The aria-label attribute for the navigaton component when it is rendered as a "nav" element.
aria-labelledby		`string` The aria-labelledby attribute for the navigaton component when it is rendered as a "nav" element.
as	`"div"`	`div \| nav` The HTML element used to render the navigation.
className		`string \| undefined` CSS string
hidden	`false`	`\| boolean \| { narrow?: boolean regular?: boolean wide?: boolean }` Whether the content is hidden.
sx		`SystemStyleObject`

PageHeader

Page navigation navigation

React examples

Title only

Title

With a description

add-pageheader-docs

With actions

Title

With UnderlineNav in the navigation slot

Pull request title

Pull Request navigation

With leading and trailing visuals

Title

With leading and trailing actions

Title

More examples

Props

PageHeader

PageHeader.ContextArea

PageHeader.ParentLink

PageHeader.ContextBar

PageHeader.ContextAreaActions

PageHeader.TitleArea

PageHeader.LeadingAction

PageHeader.LeadingVisual

PageHeader.Title

PageHeader.TrailingVisual

PageHeader.TrailingAction

PageHeader.Actions

PageHeader.Description

PageHeader.Navigation