Page header usage guidelines

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

The page header sits at the top of a page and gives users context about the page’s purpose. It includes a title and can optionally include a description, breadcrumbs, actions, navigation, and more.

When to use

• Displaying the main title of a page (h1).
• Providing context for the current page with a description, breadcrumbs, or other supporting information.
• Grouping page-level actions or navigation, such as tabs, with the page title.

When not to use

• Titling elements other than pages, such as modal dialogs or drawers.
• Titling secondary sections. A page header should appear only once per page; use lower-level headings instead.
• Communicating page-level information anywhere other than the top of the page.

Usage

Preview

Orders

View and manage all customer orders.

Code

import { UNSTABLE_PageHeader as PageHeader } from '@cimpress-ui/react';

export default function Demo() {
  return <PageHeader title="Orders" description="View and manage all customer orders." />;
}

Copy code Open in StackBlitz

Use a clear, concise title that describes the current page. Add a description when it provides helpful context that the title alone cannot convey.

With navigation and actions

Preview

Code

import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  LinkTab,
  LinkTabs,
  UNSTABLE_PageHeader as PageHeader,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <PageHeader
      title="Basic T-Shirt"
      breadcrumbs={
        <Breadcrumbs aria-label="Breadcrumbs">
          <BreadcrumbItem href="#products">Products</BreadcrumbItem>
        </Breadcrumbs>
      }
      actions={<Button variant="primary">Create order</Button>}
      tabs={
        <LinkTabs aria-label="Product views">
          <LinkTab href="#overview">Overview</LinkTab>
          <LinkTab href="#orders">Orders</LinkTab>
          <LinkTab href="#settings">Settings</LinkTab>
        </LinkTabs>
      }
    />
  );
}

Copy code Open in StackBlitz

Use breadcrumbs to show a page’s location in the hierarchy. Place page-specific actions in the header and use tabs for navigation between related views.

With divider

Preview

Code

import { UNSTABLE_PageHeader as PageHeader } from '@cimpress-ui/react';

export default function Demo() {
  return <PageHeader title="Orders" description="View and manage all customer orders." hasDivider />;
}

Copy code Open in StackBlitz

Use the divider option to visually separate the page header from the page content. When the page header contains tabs, the divider replaces the tabs’ own divider.

Set hasDivider to "full-width" to make the divider span the full width of the page, regardless of the page header’s width.

Preview

Code

import { UNSTABLE_PageHeader as PageHeader } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <PageHeader
      title="Orders"
      description="View and manage all customer orders."
      width="small"
      hasDivider="full-width"
    />
  );
}

Copy code Open in StackBlitz

Formatting and layout

Placement

Page header should always be placed at the top of the main content area. When used inside a page, it inherits the page’s width.