Skip to main content

​
About Page Header

Page Header provides a consistent way to display page titles, descriptions, metadata, and actions. It appears at the top of content areas to orient users and provide quick access to page-level actions.

​
Components

The Page Header package includes:
  • PageHeader - Main container
  • PageHeaderSetting - Configuration/context section
  • PageHeaderDetails - Details section with heading and meta
  • PageHeaderKeyword - Keyword badge
  • PageHeaderPrefix - Icon or badge prefix
  • PageHeaderHeading - Page title
  • PageHeaderParagraph - Description text
  • PageHeaderMeta - Metadata section
  • PageHeaderActions - Action buttons
  • PageHeaderInPageNavigation - Tab navigation
  • PageHeaderSeparator - Visual divider

​
Installation

yarn add @twilio-paste/page-header

​
Usage

import {
  PageHeader,
  PageHeaderSetting,
  PageHeaderDetails,
  PageHeaderHeading,
  PageHeaderActions,
  PageHeaderMeta,
  PageHeaderInPageNavigation
} from '@twilio-paste/page-header';
import { Button } from '@twilio-paste/button';

const MyPageHeader = () => (
  <PageHeader size="default">
    <PageHeaderSetting>
      <Breadcrumb>
        <BreadcrumbItem href="/">Home</BreadcrumbItem>
        <BreadcrumbItem href="/products">Products</BreadcrumbItem>
      </Breadcrumb>
    </PageHeaderSetting>
    <PageHeaderDetails>
      <PageHeaderHeading>Product Details</PageHeaderHeading>
      <PageHeaderActions>
        <Button variant="secondary">Edit</Button>
        <Button variant="primary">Save</Button>
      </PageHeaderActions>
      <PageHeaderMeta>
        <Text as="span">Last updated: 2 hours ago</Text>
      </PageHeaderMeta>
    </PageHeaderDetails>
    <PageHeaderInPageNavigation>
      <Tabs>
        {/* tabs */}
      </Tabs>
    </PageHeaderInPageNavigation>
  </PageHeader>
);

​
Props

​
PageHeader

​
PageHeaderHeading

​
PageHeaderActions

​
PageHeaderMeta

​
PageHeaderSetting

​
PageHeaderInPageNavigation

​
Size Variants

​
Default Size

Standard spacing for most pages: 
<PageHeader size="default">
  {/* content */}
</PageHeader>

​
Compact Size

Reduced spacing for dense layouts: 
<PageHeader size="compact">
  {/* content */}
</PageHeader>

​
Composition

Page Header uses a grid layout with three rows:
  1. Setting (breadcrumbs/context)
  2. Details (heading, actions, metadata)
  3. Navigation (tabs)
All sections are optional and can be used independently.

​
Accessibility

  • Use heading hierarchy appropriately (PageHeaderHeading renders h1 by default)
  • Provide clear, descriptive page titles
  • Ensure actions have accessible labels
  • Use semantic markup for metadata
  • Tab navigation should have proper ARIA labels

​
Related components

  • Topbar - Application-level navigation
  • Breadcrumb - Hierarchical navigation
  • Tabs - In-page navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us