Header

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"
    />
  );
}

Header Variants

Simple
With Description
With Actions
With Breadcrumbs

<Header title="Dashboard" />

Basic header with just a title.

<Header 
  title="User Management"
  description="View and manage all users in your organization"
/>

Header with title and descriptive text.

<Header 
  title="Products"
  description="Manage your product catalog"
  actions={
    <Button variant="primary">
      Add Product
    </Button>
  }
/>

Header with action buttons aligned to the right.

<Header 
  title="Product Details"
  breadcrumbs={
    <Breadcrumbs>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/products">Products</BreadcrumbItem>
      <BreadcrumbItem>Details</BreadcrumbItem>
    </Breadcrumbs>
  }
/>

Header with navigation breadcrumbs.

Header with Tabs

Combine the header with tab navigation:

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 Sizes

<Header 
  size="sm" 
  title="Small Header" 
/>

<Header 
  size="md" 
  title="Medium Header" 
/>

<Header 
  size="lg" 
  title="Large Header" 
/>

Props

string

required

The main heading text

string

Optional description or subtitle text

ReactNode

Breadcrumb navigation component

ReactNode

Action buttons or elements aligned to the right

ReactNode

Tab navigation component

string

default:"md"

Header size: sm, md, or lg

boolean

default:"true"

Whether to show a bottom border divider

boolean

default:"false"

Whether the header sticks to the top when scrolling

ReactNode

Additional custom content

string

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

Dashboard Header

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

Overview

UI Components

Layout

Overview

Basic Usage

Header Variants

Header with Tabs

Header Sizes

Props

TypeScript Interface

Complete Examples

Dashboard Header

Settings Page Header

List Page Header

Detail Page Header

Sticky Header for Long Pages

Layout Integration

Best Practices

Accessibility

​Overview

​Basic Usage

​Header Variants

​Header with Tabs

​Header Sizes

​Props

​TypeScript Interface

​Complete Examples

​Dashboard Header

​Settings Page Header

​List Page Header

​Detail Page Header

​Sticky Header for Long Pages

​Layout Integration

​Best Practices

​Accessibility

Overview

Basic Usage

Header Variants

Header with Tabs

Header Sizes

Props

TypeScript Interface

Complete Examples

Dashboard Header

Settings Page Header

List Page Header

Detail Page Header

Sticky Header for Long Pages

Layout Integration

Best Practices

Accessibility