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

1. Products

Basic T-Shirt

Create order

• Overview
• Orders
• Settings

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.

Formatting and layout

Placement

Page header should always be placed at the top of the main content area.