Page Header

Layout

Block

Consistent page headers with breadcrumbs, titles, descriptions, and action buttons.

Preview

Full page header with all features

Project Dashboard

Pro

Manage your projects and team members in one place.

Simple Header

Basic header with title only

Settings

With Description

Header with title and description

Team Members

Invite and manage your team members and their account permissions here.

With Badge

Header with status badge

API Documentation

Beta

Reference documentation for the REST API.

Compact Header

Smaller header for secondary pages

Profile

Edit Profile

Update your personal information

PageHeader Props

PageHeader API reference

Prop	Type	Default	Description
`title*`	`string`	—	Page title
`description`	`string`	—	Optional description text
`breadcrumbs`	`BreadcrumbItem[]`	—	Navigation breadcrumb trail
`actions`	`PageHeaderAction[]`	—	Action buttons
`badge`	`string`	—	Status badge text
`badgeVariant`	`BadgeVariant`	`'default'`	Badge color variant
`children`	`ReactNode`	—	Additional content below header
`className`	`string`	—	Additional CSS classes

CompactPageHeader Props

CompactPageHeader API reference

Prop	Type	Default	Description
`title*`	`string`	—	Page title
`subtitle`	`string`	—	Optional subtitle text
`backHref`	`string`	—	Back navigation link
`backLabel`	`string`	`'Back'`	Back link label
`actions`	`ReactNode`	—	Action buttons/content
`className`	`string`	—	Additional CSS classes

Types

Supporting type definitions

interface BreadcrumbItem {
 label: string
 href?: string // If omitted, renders as current page
}

interface PageHeaderAction {
 label: string
 onClick?: () => void
 variant?: 'primary' | 'secondary' | 'inverse' | 'ghost'
 icon?: React.ReactNode
}

Usage

Import and implementation examples

import { PageHeader, CompactPageHeader } from '@/blocks/data-display/page-header'

// Full page header
<PageHeader
 title="Dashboard"
 description="Overview of your account"
 breadcrumbs={[
 { label: 'Home', href: '/' },
 { label: 'Dashboard' },
 ]}
 actions={[
 { label: 'Export', variant: 'inverse' },
 { label: 'Create New', variant: 'primary' },
 ]}
 badge="New"
 badgeVariant="success"
/>

// Simple header
<PageHeader title="Settings" />

// Compact header with back button
<CompactPageHeader
 title="Edit User"
 subtitle="Modify user details"
 backHref="/users"
 backLabel="Users"
 actions={<Button>Save</Button>}
/>

Built With

2 components

This block uses the following UI components from the design system:

Button Badge

Features

Built-in functionality

Breadcrumb navigation: Show page hierarchy with links
Action buttons: Primary and secondary actions
Status badges: Show page or feature status
Compact variant: Smaller header for sub-pages
Back navigation: Quick return to parent page
Responsive layout: Adapts to screen size
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Breadcrumb navigation has proper nav and aria-labelPage title uses semantic h1 headingLinks have meaningful text

Keyboard Navigation

Key	Action
`Tab`	Navigate between breadcrumbs and action buttons
`Enter`	Activate links and buttons

Notes

Only one h1 per page for proper document structure
Breadcrumb current page is not a link
Action buttons have descriptive labels

Related Components

Breadcrumb Button Badge