PageHeader

PageHeader is used to determine the arrangement of the top-level headings and how elements adopt to different viewports.
  • Draft
  • Not reviewed for accessibility
import {PageHeader} from '@primer/react/drafts'

Examples

Has title only

Title variant="large"

With leading and trailing visuals

With leading visual is hidden on regular viewport

Component as Title

With leading and trailing actions

With actions

With description slot

With navigation slot

Utilizing a Navigation component

Utilizing a custom navigation

With ContextArea

With context bar and actions (only visible on mobile)

With a ContextArea with all possible children (always visible)

With actions that have responsive content

Props

NameTypeDefaultDescription
aria-label
string | undefined

A unique label for the rendered main landmark

className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject
as
React.ElementType
"div"

The underlying element to render — either a HTML element name or a React component.

PageHeader.ContextArea

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject
NameTypeDefaultDescription
className
string | undefined

CSS string

href
string

The URL to link to.

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
`{ narrow: false regular: true wide: true }`

Whether the parent link is hidden.

sx
SystemStyleObject

PageHeader.ContextBar

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.ContextAreaActions

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.TitleArea

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

variant
| 'subtitle' | 'medium' | 'large' | { narrow?: | 'subtitle' | 'medium' | 'large' regular?: | 'subtitle' | 'medium' | 'large' wide?: | 'subtitle' | 'medium' | 'large' }
medium

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

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.LeadingVisual

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Title

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject
as
React.ElementType
"h2"

The underlying element to render — either a HTML element name or a React component.

PageHeader.TrailingVisual

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.TrailingAction

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Actions

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Description

NameTypeDefaultDescription
className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Navigation

NameTypeDefaultDescription
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
React.ElementType
"div"

The HTML element used to render the navigation.

className
string | undefined

CSS string

hidden
| boolean | { narrow?: boolean regular?: boolean wide?: boolean }
false

Whether the content is hidden.

sx
SystemStyleObject

Status

Alpha

  • Component props and basic example usage of the component are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has robust unit test coverage (100% where achievable).
  • Component has visual regression coverage of its default and interactive states.
  • Component does not introduce any axe violations.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component does not introduce any performance regressions.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
  • Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.