Overview
The Header component provides consistent page header patterns with titles, descriptions, breadcrumbs, and action buttons. It helps establish clear page hierarchy and context.
Basic Usage
import { Header } from '@yourproject/components';
function Example() {
return (
<Header
title="Page Title"
description="A brief description of this page"
/>
);
}
Simple
With Description
With Actions
With Breadcrumbs
<Header title="Dashboard" />
<Header
title="User Management"
description="View and manage all users in your organization"
/>
<Header
title="Products"
description="Manage your product catalog"
actions={
<Button variant="primary">
Add Product
</Button>
}
/>
<Header
title="Product Details"
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/products">Products</BreadcrumbItem>
<BreadcrumbItem>Details</BreadcrumbItem>
</Breadcrumbs>
}
/>
import { Header, Tabs, Tab } from '@yourproject/components';
function Example() {
return (
<Header
title="Account Settings"
description="Manage your account preferences"
tabs={
<Tabs>
<Tab>Profile</Tab>
<Tab>Security</Tab>
<Tab>Notifications</Tab>
<Tab>Billing</Tab>
</Tabs>
}
/>
);
}
<Header
size="sm"
title="Small Header"
/>
<Header
size="md"
title="Medium Header"
/>
<Header
size="lg"
title="Large Header"
/>
Props
Optional description or subtitle text
Breadcrumb navigation component
Action buttons or elements aligned to the right
Header size: sm, md, or lg
Whether to show a bottom border divider
Whether the header sticks to the top when scrolling
Additional custom content
Additional CSS class names
TypeScript Interface
interface HeaderProps {
title: string;
description?: string;
breadcrumbs?: React.ReactNode;
actions?: React.ReactNode;
tabs?: React.ReactNode;
size?: 'sm' | 'md' | 'lg';
divider?: boolean;
sticky?: boolean;
children?: React.ReactNode;
className?: string;
}
Complete Examples
import { Header, Button } from '@yourproject/components';
import { Plus, Download } from 'lucide-react';
function DashboardHeader() {
return (
<Header
title="Dashboard"
description="Welcome back! Here's what's happening today."
actions={
<>
<Button variant="secondary" icon={<Download />}>
Export
</Button>
<Button variant="primary" icon={<Plus />}>
New Report
</Button>
</>
}
/>
);
}
import { Header, Breadcrumbs, BreadcrumbItem, Tabs, Tab } from '@yourproject/components';
import { useState } from 'react';
function SettingsHeader() {
const [activeTab, setActiveTab] = useState('profile');
return (
<Header
title="Settings"
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem>Settings</BreadcrumbItem>
</Breadcrumbs>
}
tabs={
<Tabs value={activeTab} onChange={setActiveTab}>
<Tab value="profile">Profile</Tab>
<Tab value="security">Security</Tab>
<Tab value="notifications">Notifications</Tab>
<Tab value="team">Team</Tab>
</Tabs>
}
sticky
/>
);
}
import { Header, Button, Input } from '@yourproject/components';
import { Plus, Search } from 'lucide-react';
function UsersHeader() {
return (
<Header
title="Users"
description="Manage team members and their permissions"
actions={
<>
<Input
leftIcon={<Search />}
placeholder="Search users..."
size="sm"
/>
<Button variant="primary" icon={<Plus />}>
Invite User
</Button>
</>
}
/>
);
}
import { Header, Breadcrumbs, BreadcrumbItem, Button } from '@yourproject/components';
import { Edit, Trash2, MoreVertical } from 'lucide-react';
function ProductDetailHeader({ product }) {
return (
<Header
title={product.name}
description={`SKU: ${product.sku} • Stock: ${product.stock} units`}
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/products">Products</BreadcrumbItem>
<BreadcrumbItem>{product.name}</BreadcrumbItem>
</Breadcrumbs>
}
actions={
<>
<Button variant="secondary" icon={<Edit />}>
Edit
</Button>
<Button variant="danger" icon={<Trash2 />}>
Delete
</Button>
<Button variant="secondary" icon={<MoreVertical />} />
</>
}
/>
);
}
import { Header, Container } from '@yourproject/components';
function LongPage() {
return (
<>
<Header
title="Documentation"
description="Complete guide to using our platform"
sticky
divider
/>
<Container>
{/* Long page content */}
</Container>
</>
);
}
Layout Integration
import { Header, Container } from '@yourproject/components';
function PageLayout({ children }) {
return (
<>
<Header
title="Page Title"
description="Page description"
/>
<Container>
{children}
</Container>
</>
);
}
Use the sticky prop for headers on long pages to keep navigation and actions accessible while scrolling.
The Header component automatically handles responsive behavior, stacking elements vertically on smaller screens.
Best Practices
- Clear hierarchy: Use descriptive titles that clearly indicate the page purpose
- Concise descriptions: Keep descriptions brief (1-2 sentences)
- Relevant actions: Include only primary actions in the header
- Consistent structure: Use similar header patterns across related pages
- Breadcrumbs: Include breadcrumbs on detail/nested pages to show navigation context
Accessibility
- Uses semantic HTML (
<header>, <h1>)
- Proper heading hierarchy for screen readers
- Action buttons are keyboard accessible
- Sticky headers maintain focus management
- ARIA labels for navigation elements