Header

Import

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

Examples

Empty Header with title (variant name)

Hide code
function HeaderExample() {
  return <Header title="Content Types" />;
}
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'),
        },
      ]}
    />
  );
}
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>
      }
    />
  );
}
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" />}
    />
  );
}
function HeaderExample() {
  return (
    <Header
      title="Entries"
      filters={<TextInput size="small" placeholder="Search" />}
    />
  );
}
Open in Playground