PageHeader

a layout component to display page title, subtitle, parent, and page-level actions

Using Grommet for HPE?See PageHeader examples and guidance.

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"a user friendly label for screen readers"

actions

Any page-level actions.

element

<Box direction="row">
    <Button label="Delete" />
    <Button label="Edit" primary />
</Box>

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string

"start"

"center"

"end"

"stretch"

"baseline"

gridArea

The name of the area to place this inside a parent Grid.

string

"a parent grid area name"

gridProps

Any valid Grid prop.

object

{}

level

The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. The sizing can be further adjusted using the size property.

string

"1"

"2"

"3"

"4"

"5"

"6"

number

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

parent

Contextual navigation or information about where the current page is located within an application.

element

<Anchor label="Parent Page" icon={<FormPrevious />} />

responsive

Whether the layout should be adjusted for mobile environments.

boolean

true

false

size

The possible sizes of PageHeader, which impacts the padding, title sizing, and subtitle sizing. 'size' will not impact parent or action sizing.

string

"small"

"medium"

"large"

subtitle

Additional description about a page's purpose. When provided as a string, it will be rendered as a paragraph.

string

"This page provides documentation for PageHeader."

element

<Box>This is a custom subtitle for the page.</Box>

title

The title of the page. When provided as a string, it will be rendered as an h1.

string

"PageHeader Documentation"

element


<Heading size="xxlarge">
    PageHeader Documentation
</Heading>

React/DOM Properties

At its core, the PageHeader component is a regular <header> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for header elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

pageHeader.actions

Any valid Box props for the actions container.

object

{ align: 'end' }

pageHeader.pad

Padding applied to PageHeader.

string

'large'

object

{ 
  top: 'large', 
  bottom: 'medium'
}

pageHeader.parent

Any valid Box props for the parent container.

object

{ align: 'start' }

pageHeader.subtitle

Any valid Paragraph props for the subtitle.

object

{
  margin: 'none'
}

pageHeader.title

Any valid Heading props for the title.

object

{
  fill: true,
  margin: 'none',
}

pageHeader.size.small.pad

Amount of pad when PageHeader size = 'small'.

object

{
  top: 'medium',
  bottom: 'small'
}

pageHeader.size.small.subtitle

Any valid Paragraph props for the subtitle when PageHeader size = 'small'.

object

{
  size: 'small',
}

pageHeader.size.small.title

Any valid Heading props for the title when PageHeader size = 'small'.

object

{
  size: 'small',
}

pageHeader.size.medium.pad

Amount of pad when PageHeader size = 'medium'. If not specified, will default to pageHeader.pad.

object

{}

pageHeader.size.medium.subtitle

Any valid Paragraph props for the subtitle when PageHeader size = 'medium'. If not specified, will default to pageHeader.subtitle.

object

{}

pageHeader.size.medium.title

Any valid Heading props for the title when PageHeader size = 'medium'. If not specified, will default to pageHeader.title.

object

{}

pageHeader.size.large.pad

Amount of pad when PageHeader size = 'large'.

object

{
  top: 'xlarge',
  bottom: 'large'
}

pageHeader.size.large.subtitle

Any valid Paragraph props for the subtitle when PageHeader size = 'large'.

object

{
  size: 'large',
}

pageHeader.size.large.title

Any valid Heading props for the title when PageHeader size = 'large'.

object

{
  size: 'large',
}

pageHeader.small

Any valid Grid props for the PageHeader layout at small breakpoint. The 'areas' can be customized to change where the contents render.

object


small: {
    areas: [
      ['parent', 'parent'],
      ['title', 'actions'],
      ['subtitle', 'actions'],
    ],
    columns: [['small', 'flex'], 'auto'],
    rows: ['auto', 'auto', 'auto'],
    gap: { row: 'xsmall', column: 'large' },
},

pageHeader.medium

Any valid Grid props for the PageHeader layout at medium breakpoint. The 'areas' can be customized to change where the contents render.

object


medium: {
    areas: [
      ['parent', 'parent'],
      ['title', 'actions'],
      ['subtitle', 'actions'],
    ],
    columns: [['medium', 'flex'], 'auto'],
    rows: ['auto', 'auto', 'auto'],
    gap: { row: 'xsmall', column: 'medium' },
},

pageHeader.large

Any valid Grid props for the PageHeader layout at large breakpoint. The 'areas' can be customized to change where the contents render.

object


large: {
    areas: [
      ['parent', 'parent'],
      ['title', 'actions'],
      ['subtitle', 'actions'],
    ],
    columns: [['medium', 'flex'], 'auto'],
    rows: ['auto', 'auto', 'auto'],
    gap: { row: 'xsmall', column: 'large' },
},