Header

Import

import { Header } from '@contentful/f36-components';
// or
import { Header } from '@contentful/f36-header';

Examples

Basic Header with title

Hide code
function HeaderExample() {
  return <Header title="Content Types" />;
}
Open in Playground

With breadcrumbs & back button

Hide code
function HeaderExample() {
  return (
    <Header
      title="Article"
      withBackButton={true}
      backButtonProps={{ onClick: () => console.log('back button click') }}
      breadcrumbs={[
        {
          content: 'Content Types',
          url: '#',
          onClick: () => console.log('Content Types clicked'),
        },
      ]}
    />
  );
}
Open in Playground

With actions

Hide code
function HeaderExample() {
  return (
    <Header
      title="Article"
      actions={
        <Flex
          alignItems="center"
          gap={tokens.spacingS}
          justifyContent="flex-end"
        >
          <Button variant="secondary" size="small">
            Suggest Alternatives
          </Button>
          <Button variant="positive" size="small">
            Save
          </Button>
        </Flex>
      }
    />
  );
}
Open in Playground

With filters

Hide code
function HeaderExample() {
  return (
    <Header
      title="Entries"
      filters={<TextInput size="small" placeholder="Search" />}
    />
  );
}
Open in Playground

Header areas

Accessibility

• The Header component renders a <header> landmark and a heading (<h1> by default). Use the title prop for a meaningful heading, and adjust the heading level with titleProps.as as needed for your page structure.
• If using multiple headers, use the as prop to avoid duplicate landmarks and keep the hierarchy of the content integer.
• Breadcrumbs and back buttons improve navigation for all users. Ensure they have descriptive, accessible labels.
• All interactive elements in actions and filters must be keyboard accessible and clearly labeled.