Skip to content
Primer Design System

Primer Design System

🎉 👀 New look, same Primer! Preview the new docs experience here and let us know what you think.

Page header

Page header determines the top-level headings of a UI.

On this page

  • @primer/react@37.15.0
  • Beta
  • Reviewed for accessibility

On this page

Import

import {PageHeader} from '@primer/react'

Examples

View in Storybook

Props

PageHeader

NameDefaultDescription
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

PageHeader.ContextArea

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.ParentLink

NameDefaultDescription
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

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.ContextAreaActions

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.TitleArea

NameDefaultDescription
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

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.LeadingVisual

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Title

NameDefaultDescription
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

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.TrailingAction

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Actions

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Breadcrumbs

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Description

NameDefaultDescription
className
string | undefined

CSS string

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

Whether the content is hidden.

sx
SystemStyleObject

PageHeader.Navigation

NameDefaultDescription
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