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
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:
|
role | AriaRole The ARIA role to assign to the top-level node of this component. | |
sx | SystemStyleObject | |
as | "div" | React.ElementType |
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 |
PageHeader.Breadcrumbs
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 |
PageHeader.Navigation
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 |