PageHeader

PageHeader is used to indicate the title of the current page, as well as optional actions.

Props

Component props
Name	Type	Default
`title` Required	`string`	-
	Page title. Will always be a level 1 heading. Content should be localized.
`maxWidth`	`Dimension`	`"100%"`
	Use numbers for pixels: `maxWidth={100}` and strings for percentages: `maxWidth="100%"`. See the max width variant for more info.
`primaryAction`	`React.Element<typeof Button \| typeof IconButton \| typeof Link \| typeof Tooltip>`	-
	The primary action of the page. Can be Button, Link, Tooltip surrounding IconButton or a combination of IconButton, Tooltip and Dropdown.
`secondaryAction`	`React.Element<typeof Button \| typeof IconButton \| typeof Link \| typeof Tooltip>`	-
	A secondary action for the page. Can be Button, Link, Tooltip surrounding IconButton or a combination of IconButton, Tooltip and Dropdown.
`subtext`	`string`	-
	Used for metadata related to the current page, not designed to describe the title or the current surface. Content should be localized.

Best practices

Use only one primary style action in PageHeader .

Ensure the title of PageHeader matches the title of the item that navigated the user to this page. For instance, if the user selects "Settings" from an overflow menu, the title of PageHeader should also say "Settings".

Plan for most PageHeaders to be full width. A maxWidth should only be supplied when the content of the page is center aligned. Content should match PageHeader's 32px start/end padding.

Don't

Supply more than one primary style action.

Don't

Use subtext to add a description about the page. It should only be used for metadata.

Don't

Use maxWidth when the content of the page is not center aligned.

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 Heading. Learn more about creating accessible headings.

<Flex direction="column" flex="grow">
  <PageHeader
    title="Settings"
    primaryAction={
      <Tooltip text="Additional options" idealDirection="up">
        <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
      </Tooltip>
    }
  />
  <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>
</Flex>;

<Flex direction="column" flex="grow">
  <PageHeader
    title="Settings"
    primaryAction={
      <Tooltip text="Additional options" idealDirection="up">
        <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
      </Tooltip>
    }
  />
  <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>
</Flex>;

Localization

Be sure to localize the title, subtext and actions within PageHeader.

<PageHeader
  title="Langer Seitentitel, der in einigen Sprachen möglicherweise abgeschnitten wird"
  subtext="2.131 Produkte"
  primaryAction={<Button color="red" size="lg" text="Schnell erstellen" />}
/>;

<PageHeader
  title="Langer Seitentitel, der in einigen Sprachen möglicherweise abgeschnitten wird"
  subtext="2.131 Produkte"
  primaryAction={<Button color="red" size="lg" text="Schnell erstellen" />}
/>;

Variants

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".

function PrimaryActionExample() {
  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={<Button color="red" size="lg" text="Create group" />}
      />
      <Divider />
      <PageHeader
        title="Kitchen Reno Ideas"
        primaryAction={
          <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}
                  badgeText="New"
                  option={{
                    value: 'Merge',
                    label: 'Merge',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
      <Divider />
      <PageHeader
        title="Create campaign"
        primaryAction={
          <Link href="www.pinterest.com">
            <Text weight="bold">Switch to quick ad creation</Text>
          </Link>
        }
      />
    </Flex>
  );
}

function PrimaryActionExample() {
  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={<Button color="red" size="lg" text="Create group" />}
      />
      <Divider />
      <PageHeader
        title="Kitchen Reno Ideas"
        primaryAction={
          <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}
                  badgeText="New"
                  option={{
                    value: 'Merge',
                    label: 'Merge',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
      <Divider />
      <PageHeader
        title="Create campaign"
        primaryAction={
          <Link href="www.pinterest.com">
            <Text weight="bold">Switch to quick ad creation</Text>
          </Link>
        }
      />
    </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".

function SecondaryActionExample() {
  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={<Button color="red" size="lg" text="Create product group" />}
        secondaryAction={<Button text="Promote" size="lg"/>}
      />
      <Divider />
      <PageHeader
        title="Custom reports"
        primaryAction={<Button color="red" size="lg" text="Create new report" />}
        secondaryAction={
          <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}
                  badgeText="New"
                  option={{
                    value: 'Delete',
                    label: 'Delete',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
    </Flex>
  );
}

function SecondaryActionExample() {
  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={<Button color="red" size="lg" text="Create product group" />}
        secondaryAction={<Button text="Promote" size="lg"/>}
      />
      <Divider />
      <PageHeader
        title="Custom reports"
        primaryAction={<Button color="red" size="lg" text="Create new report" />}
        secondaryAction={
          <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}
                  badgeText="New"
                  option={{
                    value: 'Delete',
                    label: 'Delete',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
    </Flex>
  );
}

Subtext

subtext should be used to add metadata about the content on the page, not to describe the page itself.

<PageHeader
  title="Create product group"
  subtext="2,131 products"
  primaryAction={<Button color="red" size="lg" text="Quick create" />}
/>;

<PageHeader
  title="Create product group"
  subtext="2,131 products"
  primaryAction={<Button color="red" size="lg" text="Quick create" />}
/>;

Max width

maxWidth should be set when the content of the page is centered and/or has a maximum width itself.

<Box width="100%" color="lightGray" padding={2}>
  <Box color="white" marginBottom={4} >
    <PageHeader
      title="All boards"
      maxWidth="65%"
      primaryAction={
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
        </Tooltip>
      }
    />
  </Box>
  <Flex direction="column" alignItems="center" justifyContent="center" gap={1}>
    <Avatar size="lg" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" name="Keerthi" />
    <Heading size="500">Keerthi M.</Heading>
    <Text>@kreethiM</Text>
    <Text weight="bold">4 followers · 0 following </Text>
  </Flex>
</Box>;

<Box width="100%" color="lightGray" padding={2}>
  <Box color="white" marginBottom={4} >
    <PageHeader
      title="All boards"
      maxWidth="65%"
      primaryAction={
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
        </Tooltip>
      }
    />
  </Box>
  <Flex direction="column" alignItems="center" justifyContent="center" gap={1}>
    <Avatar size="lg" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" name="Keerthi" />
    <Heading size="500">Keerthi M.</Heading>
    <Text>@kreethiM</Text>
    <Text weight="bold">4 followers · 0 following </Text>
  </Flex>
</Box>;

Heading
Heading should be used to create level 2-6 headings on a page. If a level 1 heading is needed, use PageHeader.

Edit page on GitHub

PageHeader

Props

Best practices

Accessibility

Localization

Variants

Primary action

Secondary action

Subtext

Max width

Related