PageHeader

View source on GitHub

PageHeader is used to indicate the title of the current screen and can also provide additional content and actions that relate to the current screen as a whole.

Props

Component props
Name	Type	Default
`title` Required	`string`	-
	Page title. Will always be a level 1 heading. Content should be localized. See the title variant to learn more.
`badge`	`{\| text: string, tooltipText?: string \|}`	-
	Add Badge displayed after the title. Be sure to localize the text. See the title variant to learn more.
`borderStyle`	`"sm" \| "none"`	`"none"`
	Specify a bottom border style for PageHeader: "sm" is 1px. See the max width & border variant to learn more.
`dropdownAccessibilityLabel`	`string`	-
	Label used for screen readers to provide information about the action IconButton displayed under the sm breakpoint. See the primary action variant or secondary action variant to learn more.
`helperIconButton`	`{\| accessibilityLabel: string, accessibilityControls: string, accessibilityExpanded: boolean, onClick: ({\| event: \| SyntheticMouseEvent<HTMLButtonElement> \| SyntheticKeyboardEvent<HTMLButtonElement> \| SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void, \|}`	-
	Helper IconButton to be placed after the title for a supplemental Call To Action (CTA). See the title variant to learn more.
`helperLink`	`{\| text: string, accessibilityLabel: string, href: string, onClick: ({\| event: SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void, \|}`	-
	Helper Link to be placed after the subtext. See the subtext variant to learn more.
`items`	`$ReadOnlyArray<React.Node>`	-
	Optional row of components. We mostly recommend using Datapoint. See the complementary items variant to learn more.
`maxWidth`	`Dimension`	`"100%"`
	Use numbers for pixels: `maxWidth={100}` and strings for percentages: `maxWidth="100%"`. See the max width & border variant for more info.
`primaryAction`	`{\| component: React.Element<typeof Button \| typeof IconButton \| typeof Link \| typeof Text \| typeof Tooltip>>, dropdownItems: $ReadOnlyArray<React.Element<typeof DropdownItem \| typeof DropdownLink>>> \|}`	-
	The primary action of the page. Can be Button, Link, Tooltip surrounding IconButton or a combination of IconButton, Tooltip and Dropdown. Primary and secondary actions are consolidated into Dropdown below the sm breakpoint. `primaryAction` takes both the main component and its equivalent using Dropdown subcomponents. See the primary action variant to learn more.
`secondaryAction`	`{\| component: React.Element<typeof Button \| typeof IconButton \| typeof Link \| typeof Text \| typeof Tooltip>>, dropdownItems: $ReadOnlyArray<React.Element<typeof DropdownItem \| typeof DropdownLink>>> \|}`	-
	A secondary action for the page. Can be Button, Link, Tooltip surrounding IconButton or a combination of IconButton, Tooltip and Dropdown. Primary and secondary actions are are consolidated into Dropdown below the sm breakpoint. `secondaryAction` takes both the main component and its equivalent using Dropdown subcomponents. See the secondary action variant to learn more.
`subtext`	`string`	-
	Used primarily for metadata related to the current page, not designed to describe the title or the current surface. Content should be localized. See the subtext variant to learn more.
`thumbnail`	`React.Element<typeof Image>`	-
	An optional thumbnail Image to be displayed next to the title. See the title variant to learn more.

Usage guidelines

When to use

To inform a user about the overall content of a page

When not to use

As a header for an overlay surface like a Modal, Popover or Sheet
As page navigation
As a title for sections inside of a page—there should only be one page header on a page
As a toolbar

Best practices

Use only one primary action style in PageHeader. This should also be the only primary action on the page.

Don't

Use more than one primary action style in PageHeader, or include a primary action when there’s already a primary action elsewhere on the page. If there's already a primary action elsewhere on the page, PageHeader can have 1 or 2 secondary actions.

Plan for most PageHeaders to be full width. A maxWidth should only be supplied when the content of the page is center aligned. The PageHeader’s padding should match the page’s overall padding.

Don't

Provide maxWidth for PageHeader content that is different from the page content

Include an image when unique to the page content, such as a page dedicated to a developer’s apps

Don't

Include a profile avatar image in PageHeader, as the user avatar should be provided in the main app navigation

Keep additional help buttons and links to a minimum, choosing one source of help per PageHeader

Don't

Overload PageHeader with a help IconButton, help Link and info Tooltips. Too many sources of help on the page may confuse users. If there are multiple items to explain, use the help IconButton to open a Sheet with further help. If you want to lead users to external documentation, add a help Link with the helperLink prop.

Accessibility

Be sure to follow any accessibility guidelines for the components used within PageHeader. The heading within PageHeader will be rendered as a level 1 heading, so ensure there are no other level 1 headings present on the page. For headings level 2-6, use Headings. Learn more about creating accessible headings.

<Box width="100%" color="white">
  <PageHeader
    title="Settings"
    primaryAction={{
      component: (
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton
            icon="ellipsis"
            iconColor="darkGray"
            size="lg"
            accessibilityLabel="Additional options"
          />
        </Tooltip>
      ),
      dropdownItems: [
        <Dropdown.Item option={{ value: 'Item', label: 'Item' }} onSelect={() => {}} />,
      ],
    }}
    dropdownAccessibilityLabel="Additional options"
  />
  <Box display="flex" wrap width="80%" direction="column" marginStart={5}>
    <Box flex="grow" paddingX={3} paddingY={3}>
      <Heading size="400" accessibilityLevel={2}>
        Edit profile
      </Heading>
    </Box>

    <Box flex="grow" paddingX={3} paddingY={3}>
      <TextField label="Name" id="textfield7" onChange={() => {}} placeholder="Placeholder" />
    </Box>

    <Box flex="grow" paddingX={3} paddingY={3}>
      <Box display="flex" wrap marginStart={-3} marginEnd={-3} marginBottom={-3} marginTop={-3}>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField label="Phone" id="textfield8" onChange={() => {}} placeholder="Placeholder" />
        </Box>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField label="Email" id="textfield9" onChange={() => {}} placeholder="Placeholder" />
        </Box>
      </Box>
    </Box>
  </Box>
</Box>

<Box width="100%" color="white">
  <PageHeader
    title="Settings"
    primaryAction={{
      component: (
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton
            icon="ellipsis"
            iconColor="darkGray"
            size="lg"
            accessibilityLabel="Additional options"
          />
        </Tooltip>
      ),
      dropdownItems: [
        <Dropdown.Item option={{ value: 'Item', label: 'Item' }} onSelect={() => {}} />,
      ],
    }}
    dropdownAccessibilityLabel="Additional options"
  />
  <Box display="flex" wrap width="80%" direction="column" marginStart={5}>
    <Box flex="grow" paddingX={3} paddingY={3}>
      <Heading size="400" accessibilityLevel={2}>
        Edit profile
      </Heading>
    </Box>

    <Box flex="grow" paddingX={3} paddingY={3}>
      <TextField label="Name" id="textfield7" onChange={() => {}} placeholder="Placeholder" />
    </Box>

    <Box flex="grow" paddingX={3} paddingY={3}>
      <Box display="flex" wrap marginStart={-3} marginEnd={-3} marginBottom={-3} marginTop={-3}>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField label="Phone" id="textfield8" onChange={() => {}} placeholder="Placeholder" />
        </Box>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField label="Email" id="textfield9" onChange={() => {}} placeholder="Placeholder" />
        </Box>
      </Box>
    </Box>
  </Box>
</Box>

Localization

Be sure to localize the badge, dropdownAccessibilityLabel, helperIconButton, helperLink, title, subtext, as well as any primaryAction, secondaryAction and item components used within PageHeader.

Be brief with text in all components to account for languages with longer words.

<PageHeader
  title="Anzeigenübersicht"
  subtext='5 aktive Kampagnen.'
  helperLink={{
    text: "Mehr erfahren.",
    accessibilityLabel: "Erfahren Sie mehr auf Pinterest.com",
    href: "http://www.pinterest.com",
    onClick: () => {} }}
  items={[
    <Datapoint
      size="md"
      title="Impressionen"
      value="$1.25M"
      trend={{ value: 30, accessibilityLabel: 'Aufwärtstrend' }}
    />,
  ]}
  primaryAction={{
    component: <Button color="red" size="lg" text="Fördern" />,
    dropdownItems: [
      <Dropdown.Item option={{ value: 'Fördern', label: 'Fördern' }} onSelect={() => {}} />,
    ],
  }}
  secondaryAction={{
    component: <Button size="lg" text="Analysen anzeigen" />,
    dropdownItems: [
      <Dropdown.Link
        option={{ value: 'Analysen anzeigen', label: 'Analysen anzeigen' }}
        href="https://pinterest.com"
      />,
    ],
  }}
  dropdownAccessibilityLabel="Mehr Optionen"
/>

<PageHeader
  title="Anzeigenübersicht"
  subtext='5 aktive Kampagnen.'
  helperLink={{
    text: "Mehr erfahren.",
    accessibilityLabel: "Erfahren Sie mehr auf Pinterest.com",
    href: "http://www.pinterest.com",
    onClick: () => {} }}
  items={[
    <Datapoint
      size="md"
      title="Impressionen"
      value="$1.25M"
      trend={{ value: 30, accessibilityLabel: 'Aufwärtstrend' }}
    />,
  ]}
  primaryAction={{
    component: <Button color="red" size="lg" text="Fördern" />,
    dropdownItems: [
      <Dropdown.Item option={{ value: 'Fördern', label: 'Fördern' }} onSelect={() => {}} />,
    ],
  }}
  secondaryAction={{
    component: <Button size="lg" text="Analysen anzeigen" />,
    dropdownItems: [
      <Dropdown.Link
        option={{ value: 'Analysen anzeigen', label: 'Analysen anzeigen' }}
        href="https://pinterest.com"
      />,
    ],
  }}
  dropdownAccessibilityLabel="Mehr Optionen"
/>

Variants

Title

PageHeader's title is the main part of the component as it represents the page's main heading (it will always be a level 1 heading). It can be complemented with three additional elements: a thumbnail (left) and a badge and/or a help Icon (right). Don't forget to localized its content.

<PageHeader
  title="Pinterest app"
  badge={{ text: 'New', tooltipText: 'New integration' }}
  helperIconButton={{
        accessibilityLabel: 'Read more information about the new Pinterest integration',
        onClick: () => {},
      }}
  thumbnail={
        <Image
          alt="square"
          fit="cover"
          naturalHeight={1}
          naturalWidth={1}
          src="https://i.ibb.co/LQc8ynn/image.png"
        />
      }

/>

<PageHeader
  title="Pinterest app"
  badge={{ text: 'New', tooltipText: 'New integration' }}
  helperIconButton={{
        accessibilityLabel: 'Read more information about the new Pinterest integration',
        onClick: () => {},
      }}
  thumbnail={
        <Image
          alt="square"
          fit="cover"
          naturalHeight={1}
          naturalWidth={1}
          src="https://i.ibb.co/LQc8ynn/image.png"
        />
      }

/>

Primary action

PageHeader supports an optional primaryAction. It can be a Button, a Link or an IconButton with a Tooltip and optional Dropdown. Any Buttons or IconButtons should be size="lg".

If there's already a primary action elsewhere on the page, PageHeader can have 1 or 2 secondary actions. Use primaryAction as an additional secondary action.

Primary and secondary actions are consolidated into Dropdown below the sm breakpoint. primaryAction takes both the main component and its equivalent using Dropdown subcomponents.

For example, Button should be complemented with Dropdown.Item, Link should be complemented with Dropdown.Link, and an IconButton displaying a Dropdown should reuse the same Dropdown subcomponents. Don't forget to pass dropdownAccessibilityLabel for the IconButton consolidating all actions into Dropdown below the sm breakpoint.

Resize your window to observe how the PageHeaders below adapt to smaller screen widths.

function Example() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={{
          component: <Button color="red" size="lg" text="Create group" />,
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Create group', label: 'Create group' }}
              onSelect={() => {}}
            />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
      <Divider />
      <PageHeader
        title="Kitchen Reno Ideas"
        primaryAction={{
          component: (
            <React.Fragment>
              <Tooltip idealDirection="up" text="Board options">
                <IconButton
                  accessibilityControls="page-header-example"
                  accessibilityHaspopup
                  accessibilityExpanded={open}
                  accessibilityLabel="Board options"
                  icon="ellipsis"
                  iconColor="darkGray"
                  selected={open}
                  onClick={() => setOpen((prevVal) => !prevVal)}
                  ref={anchorRef}
                  size="lg"
                />
              </Tooltip>
              {open && (
                <Dropdown
                  id="page-header-example"
                  anchor={anchorRef.current}
                  onDismiss={() => {
                    setOpen(false);
                  }}
                >
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{
                      value: 'Edit Board',
                      label: 'Edit Board',
                    }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{ value: 'Share', label: 'Share' }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    badge={{ text: 'New' }}
                    option={{
                      value: 'Merge',
                      label: 'Merge',
                    }}
                  />
                </Dropdown>
              )}
            </React.Fragment>
          ),
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Edit board', label: 'Edit board' }}
              onSelect={() => {}}
            />,
            <Dropdown.Item
              option={{ value: 'Share board', label: 'Share board' }}
              onSelect={() => {}}
            />,
            <Dropdown.Item
              option={{ value: 'Merge board', label: 'Merge board' }}
              onSelect={() => {}}
            />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
      <Divider />
      <PageHeader
        title="Ads overview"
        primaryAction={{
          component: (
            <Text weight="bold">
              <Link href="www.pinterest.com">Switch to quick ad creation</Link>
            </Text>
          ),
          dropdownItems: [
            <Dropdown.Link
              key="Visit"
              href="www.pinterest.com"
              option={{
                value: 'Switch to quick ad creation',
                label: 'Switch to quick ad creation',
              }}
            />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
    </Flex>
  )
}

function Example() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={{
          component: <Button color="red" size="lg" text="Create group" />,
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Create group', label: 'Create group' }}
              onSelect={() => {}}
            />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
      <Divider />
      <PageHeader
        title="Kitchen Reno Ideas"
        primaryAction={{
          component: (
            <React.Fragment>
              <Tooltip idealDirection="up" text="Board options">
                <IconButton
                  accessibilityControls="page-header-example"
                  accessibilityHaspopup
                  accessibilityExpanded={open}
                  accessibilityLabel="Board options"
                  icon="ellipsis"
                  iconColor="darkGray"
                  selected={open}
                  onClick={() => setOpen((prevVal) => !prevVal)}
                  ref={anchorRef}
                  size="lg"
                />
              </Tooltip>
              {open && (
                <Dropdown
                  id="page-header-example"
                  anchor={anchorRef.current}
                  onDismiss={() => {
                    setOpen(false);
                  }}
                >
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{
                      value: 'Edit Board',
                      label: 'Edit Board',
                    }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{ value: 'Share', label: 'Share' }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    badge={{ text: 'New' }}
                    option={{
                      value: 'Merge',
                      label: 'Merge',
                    }}
                  />
                </Dropdown>
              )}
            </React.Fragment>
          ),
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Edit board', label: 'Edit board' }}
              onSelect={() => {}}
            />,
            <Dropdown.Item
              option={{ value: 'Share board', label: 'Share board' }}
              onSelect={() => {}}
            />,
            <Dropdown.Item
              option={{ value: 'Merge board', label: 'Merge board' }}
              onSelect={() => {}}
            />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
      <Divider />
      <PageHeader
        title="Ads overview"
        primaryAction={{
          component: (
            <Text weight="bold">
              <Link href="www.pinterest.com">Switch to quick ad creation</Link>
            </Text>
          ),
          dropdownItems: [
            <Dropdown.Link
              key="Visit"
              href="www.pinterest.com"
              option={{
                value: 'Switch to quick ad creation',
                label: 'Switch to quick ad creation',
              }}
            />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
    </Flex>
  )
}

Secondary action

PageHeader also supports an optional secondaryAction. It will likely be a Button or an IconButton with a Tooltip and optional Dropdown. Any Buttons or IconButtons should be size="lg".

Primary and secondary actions are consolidated into Dropdown below the sm breakpoint. secondaryAction takes both the main component and its equivalent using Dropdown subcomponents.

For example, Button should be complemented with Dropdown.Item, Link should be complemented with Dropdown.Link, and an IconButton displaying a Dropdown should reused the same Dropdown subcomponents. Don't forget to pass dropdownAccessibilityLabel for the IconButton consolidating all actions into Dropdown below the sm breakpoint.

Resize your window to observe how the PageHeaders below adapt to smaller screen widths.

function Example() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={{
          component: <Button color="red" size="lg" text="Create product group" />,
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Create product group', label: 'Create product group' }}
              onSelect={() => {}}
            />,
          ],
        }}
        secondaryAction={{
          component: <Button text="Promote" size="lg" />,
          dropdownItems: [
            <Dropdown.Item option={{ value: 'Promote', label: 'Promote' }} onSelect={() => {}} />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
      <Divider />
      <PageHeader
        title="Custom reports"
        dropdownAccessibilityLabel="Additional options"
        primaryAction={{
          component: <Button color="red" size="lg" text="Create new report" />,
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Create new report', label: 'Create new report' }}
              onSelect={() => {}}
            />,
          ],
        }}
        secondaryAction={{
          component: (
            <React.Fragment>
              <Tooltip idealDirection="up" text="Board options">
                <IconButton
                  accessibilityControls="page-header-example"
                  accessibilityHaspopup
                  accessibilityExpanded={open}
                  accessibilityLabel="Board options"
                  icon="ellipsis"
                  iconColor="darkGray"
                  selected={open}
                  onClick={() => setOpen((prevVal) => !prevVal)}
                  ref={anchorRef}
                  size="lg"
                />
              </Tooltip>
              {open && (
                <Dropdown
                  id="page-header-example"
                  anchor={anchorRef.current}
                  onDismiss={() => {
                    setOpen(false);
                  }}
                >
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{
                      value: 'Share report',
                      label: 'Share report',
                    }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{ value: 'Help center', label: 'Help center' }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    badge={{ text: 'New' }}
                    option={{
                      value: 'Delete',
                      label: 'Delete',
                    }}
                  />
                </Dropdown>
              )}
            </React.Fragment>
          ),
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Share report', label: 'Share report' }}
              onSelect={() => {}}
            />,
            <Dropdown.Link
              option={{ value: 'Visit help center', label: 'Visit help center' }}
              isExternal
              onSelect={() => {}}
            />,
            <Dropdown.Item
              option={{ value: 'Delete report', label: 'Delete report' }}
              onSelect={() => {}}
            />,
          ],
        }}
      />
    </Flex>
  )
}

function Example() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={{
          component: <Button color="red" size="lg" text="Create product group" />,
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Create product group', label: 'Create product group' }}
              onSelect={() => {}}
            />,
          ],
        }}
        secondaryAction={{
          component: <Button text="Promote" size="lg" />,
          dropdownItems: [
            <Dropdown.Item option={{ value: 'Promote', label: 'Promote' }} onSelect={() => {}} />,
          ],
        }}
        dropdownAccessibilityLabel="Additional options"
      />
      <Divider />
      <PageHeader
        title="Custom reports"
        dropdownAccessibilityLabel="Additional options"
        primaryAction={{
          component: <Button color="red" size="lg" text="Create new report" />,
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Create new report', label: 'Create new report' }}
              onSelect={() => {}}
            />,
          ],
        }}
        secondaryAction={{
          component: (
            <React.Fragment>
              <Tooltip idealDirection="up" text="Board options">
                <IconButton
                  accessibilityControls="page-header-example"
                  accessibilityHaspopup
                  accessibilityExpanded={open}
                  accessibilityLabel="Board options"
                  icon="ellipsis"
                  iconColor="darkGray"
                  selected={open}
                  onClick={() => setOpen((prevVal) => !prevVal)}
                  ref={anchorRef}
                  size="lg"
                />
              </Tooltip>
              {open && (
                <Dropdown
                  id="page-header-example"
                  anchor={anchorRef.current}
                  onDismiss={() => {
                    setOpen(false);
                  }}
                >
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{
                      value: 'Share report',
                      label: 'Share report',
                    }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    option={{ value: 'Help center', label: 'Help center' }}
                  />
                  <Dropdown.Item
                    handleSelect={handleSelect}
                    selected={selected}
                    badge={{ text: 'New' }}
                    option={{
                      value: 'Delete',
                      label: 'Delete',
                    }}
                  />
                </Dropdown>
              )}
            </React.Fragment>
          ),
          dropdownItems: [
            <Dropdown.Item
              option={{ value: 'Share report', label: 'Share report' }}
              onSelect={() => {}}
            />,
            <Dropdown.Link
              option={{ value: 'Visit help center', label: 'Visit help center' }}
              isExternal
              onSelect={() => {}}
            />,
            <Dropdown.Item
              option={{ value: 'Delete report', label: 'Delete report' }}
              onSelect={() => {}}
            />,
          ],
        }}
      />
    </Flex>
  )
}

Complementary items

PageHeader supports an optional pair of components next to the CTA section. It's strongly recommended to limit this space to data display components, mostly Datapoint. The complementary component section is hidden in small breakpoints.

<PageHeader
  title="Ads overview"
  helperIconButton={{
        accessibilityLabel: 'Read more information about Ads overview',
        onClick: () => {},
      }}
  items={[
    <Datapoint
      size="md"
      title="Impressions"
      value="$1.25M"
      trend={{ value: 30, accessibilityLabel: 'Trending up' }}
    />,
    <Datapoint
      size="md"
      title="Engagement"
      value="10%"
      trend={{ value: 5, accessibilityLabel: 'Trending up' }}
    />
  ]}
  primaryAction={{
    component: <Button color="red" size="lg" text="Promote" />,
    dropdownItems: [
      <Dropdown.Item option={{ value: 'Promote', label: 'Promote' }} onSelect={() => {}} />,
    ],
  }}
  secondaryAction={{
    component: <Button size="lg" text="View analytics" />,
    dropdownItems: [
      <Dropdown.Link
        option={{ value: 'View analytics', label: 'View analytics' }}
        href="https://pinterest.com"
      />,
    ],
  }}
  dropdownAccessibilityLabel="More options"
/>

<PageHeader
  title="Ads overview"
  helperIconButton={{
        accessibilityLabel: 'Read more information about Ads overview',
        onClick: () => {},
      }}
  items={[
    <Datapoint
      size="md"
      title="Impressions"
      value="$1.25M"
      trend={{ value: 30, accessibilityLabel: 'Trending up' }}
    />,
    <Datapoint
      size="md"
      title="Engagement"
      value="10%"
      trend={{ value: 5, accessibilityLabel: 'Trending up' }}
    />
  ]}
  primaryAction={{
    component: <Button color="red" size="lg" text="Promote" />,
    dropdownItems: [
      <Dropdown.Item option={{ value: 'Promote', label: 'Promote' }} onSelect={() => {}} />,
    ],
  }}
  secondaryAction={{
    component: <Button size="lg" text="View analytics" />,
    dropdownItems: [
      <Dropdown.Link
        option={{ value: 'View analytics', label: 'View analytics' }}
        href="https://pinterest.com"
      />,
    ],
  }}
  dropdownAccessibilityLabel="More options"
/>

Subtext

subtext should be used to add metadata about the content on the page, not to describe the page itself. They can be complemented with a helperLink.

<PageHeader
  title="Create product group"
  subtext="2,131 catalog products."
  helperLink={{
    text: "Learn more about bulk product catalog uploads.",
    href: "http://www.pinterest.com",
    onClick: () => {} }}
  primaryAction={{
    component: <Button color="red" size="lg" text="Quick create" />,
    dropdownItems: [
      <Dropdown.Item
        option={{ value: 'Quick create', label: 'Quick create' }}
        onSelect={() => {}}
      />,
    ],
  }}
  dropdownAccessibilityLabel="Additional options"
/>

<PageHeader
  title="Create product group"
  subtext="2,131 catalog products."
  helperLink={{
    text: "Learn more about bulk product catalog uploads.",
    href: "http://www.pinterest.com",
    onClick: () => {} }}
  primaryAction={{
    component: <Button color="red" size="lg" text="Quick create" />,
    dropdownItems: [
      <Dropdown.Item
        option={{ value: 'Quick create', label: 'Quick create' }}
        onSelect={() => {}}
      />,
    ],
  }}
  dropdownAccessibilityLabel="Additional options"
/>

Max width & border

A maxWidth should only be supplied when the content of the page is center aligned. The PageHeader’s padding should match the page’s overall padding.

PageHeader also supports a bottom border to show the division between PageHeader and the page content below.

<Box width="100%" color="white">
  <PageHeader
    maxWidth="65%"
    borderStyle="sm"
    title="Settings"
    primaryAction={{
      component: (
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton
            icon="ellipsis"
            iconColor="darkGray"
            size="lg"
            accessibilityLabel="Additional options"
          />
        </Tooltip>
      ),
      dropdownItems: [
        <Dropdown.Item option={{ value: 'Item', label: 'Item' }} onSelect={() => {}} />,
      ],
    }}
    dropdownAccessibilityLabel="Additional options"
  />
    <Flex justifyContent="center">
      <Box color="white" width="60%" paddingY={6}>
        <Flex direction="column" gap={5}>
          <Heading size="400" accessibilityLevel={2}>
            Edit profile
          </Heading>
          <TextField label="Name" id="a-textfield1" onChange={() => {}} placeholder="Placeholder" />
          <Flex gap={2}>
            <Flex.Item flex="grow">
              <TextField label="Phone" id="a-textfield2" onChange={() => {}} placeholder="Placeholder" />
            </Flex.Item>
            <Flex.Item flex="grow">
              <TextField label="Email" id="a-textfield3" onChange={() => {}} placeholder="Placeholder" />
            </Flex.Item>
          </Flex>
          <SelectList
            label="Location"
            id="selectlist3"
            options={[
              {
                value: 'belgium',
                label: 'Belgium',
              },
              {
                value: 'france',
                label: 'France',
              },
              {
                value: 'usa',
                label: 'USA',
              },
            ]}
            placeholder="Placeholder"
            onChange={() => {}}
          />
        </Flex>
      </Box>
    </Flex>
</Box>

<Box width="100%" color="white">
  <PageHeader
    maxWidth="65%"
    borderStyle="sm"
    title="Settings"
    primaryAction={{
      component: (
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton
            icon="ellipsis"
            iconColor="darkGray"
            size="lg"
            accessibilityLabel="Additional options"
          />
        </Tooltip>
      ),
      dropdownItems: [
        <Dropdown.Item option={{ value: 'Item', label: 'Item' }} onSelect={() => {}} />,
      ],
    }}
    dropdownAccessibilityLabel="Additional options"
  />
    <Flex justifyContent="center">
      <Box color="white" width="60%" paddingY={6}>
        <Flex direction="column" gap={5}>
          <Heading size="400" accessibilityLevel={2}>
            Edit profile
          </Heading>
          <TextField label="Name" id="a-textfield1" onChange={() => {}} placeholder="Placeholder" />
          <Flex gap={2}>
            <Flex.Item flex="grow">
              <TextField label="Phone" id="a-textfield2" onChange={() => {}} placeholder="Placeholder" />
            </Flex.Item>
            <Flex.Item flex="grow">
              <TextField label="Email" id="a-textfield3" onChange={() => {}} placeholder="Placeholder" />
            </Flex.Item>
          </Flex>
          <SelectList
            label="Location"
            id="selectlist3"
            options={[
              {
                value: 'belgium',
                label: 'Belgium',
              },
              {
                value: 'france',
                label: 'France',
              },
              {
                value: 'usa',
                label: 'USA',
              },
            ]}
            placeholder="Placeholder"
            onChange={() => {}}
          />
        </Flex>
      </Box>
    </Flex>
</Box>

Responsive design

Beta

PageHeader is responsive to different web desktop breakpoints. Therefore, PageHeader’s behavior relies on the window size and requires PageHeader to be used on a full-window width to correctly respond to different breakpoints. Don’t use PageHeader right next to elements such as side-navigation bars that wouldn’t allow PageHeader to extend the full width of the window.

Writing

Use sentences for titles capitalizing proper names and product names, including the word “Pin”
Make sure page titles match the menu item that was used to navigate to the page
Keep subtext short to account for localization and smaller screens

Don't

Make page titles, subtext and action text lengthy so that it truncates quickly at smaller screen sizes

Heading
Heading allows you to show headings on the page, therefore, it should be used to create level 2-6 headings on a page. If a level 1 heading is needed, use PageHeader. Use as a title for sections below PageHeader, or for when a page needs a title but doesn’t warrant a PageHeader.

Edit page on GitHub

PageHeader

Props

Usage guidelines

Best practices

Accessibility

Localization

Variants

Title

Primary action

Secondary action

Complementary items

Subtext

Max width & border

Responsive design

Writing

Related