Skip to main content

​
Header Component

The Header component provides a consistent application header layout across Proton applications. Location: components/header/Header.tsx

​
Basic Usage

import Header from '@proton/components/components/header/Header';
import { Button } from '@proton/atoms/Button/Button';

const MyApp = () => {
  return (
    <Header>
      <div className="flex flex-1 items-center">
        <h1>My Application</h1>
      </div>
      <div className="flex gap-2">
        <Button>Action</Button>
      </div>
    </Header>
  );
};

​
Props

Extends HTMLAttributes<HTMLDivElement>
​
children
ReactNode
Header content
​
className
string
Additional CSS classes

​
Examples

<Header>
  <div className="flex items-center gap-4">
    <Logo />
    <h1>Proton Mail</h1>
  </div>
</Header>

​
Styling

The Header component applies base styling:
  • Flex container with nowrap
  • Reset for print media
  • Additional classes can be added via className

​
Layout Pattern

const AppLayout = () => {
  return (
    <div className="flex flex-column h-full">
      <Header>
        {/* Header content */}
      </Header>
      <div className="flex flex-1">
        <Sidebar>
          {/* Sidebar content */}
        </Sidebar>
        <main className="flex-1">
          {/* Main content */}
        </main>
      </div>
    </div>
  );
};

​
Best Practices

​
Responsive Design

<Header>
  <div className="flex flex-1 items-center">
    {/* Mobile: Show hamburger */}
    <Button className="md:hidden" icon>
      <Icon name="hamburger" />
    </Button>
    
    {/* Desktop: Show full navigation */}
    <nav className="hidden md:flex gap-4">
      <a href="/home">Home</a>
      <a href="/about">About</a>
    </nav>
  </div>
</Header>

​
Accessibility

<Header role="banner">
  <nav aria-label="Main navigation">
    <a href="/" aria-current="page">Home</a>
    <a href="/settings">Settings</a>
  </nav>
</Header>

​
Consistent Height

// Use consistent height across the app
<Header className="h-custom" style={{ '--h-custom': '4rem' }}>
  {/* Content */}
</Header>
  • Sidebar - Sidebar navigation component
  • Container - Content container components

​
Source Code

View source: packages/components/components/header/Header.tsx:1

Build docs developers (and LLMs) love

Get started for freeTalk to us