Component Overview

A consistent page header component for page titles, breadcrumbs, and actions.

The PageHeader component provides a consistent way to display the title of a page along with optional elements like breadcrumbs for navigation, a subtitle for additional context, and action buttons for common tasks.

When to use

• At the top of every page to provide consistent navigation and context
• When you need to display page-level actions that apply to the entire content
• To establish hierarchy through breadcrumb navigation

Best practices

• Keep page titles concise and descriptive
• Use breadcrumbs for pages that are nested more than one level deep
• Limit action buttons to the most important 1-3 actions
• Use different variants to indicate the context or status of a page when appropriate

Import

1
import PageHeader from '@/components/PageHeader';

Basic Usage

1
<PageHeader title="Page Title" />