Forma 36 - Header

Import

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

Examples

Empty Header with title (variant name)


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

With breadcrumbs & back button


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


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


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

Props (API reference)

Open in Storybook

Name	Type	Default
actions	ReactElement<any, string \| JSXElementConstructor<any>> ReactElement<any, string \| JSXElementConstructor<any>>[] Optional JSX children to display as complementary actions (e.g. buttons) related to the current page/route.
as	HTML Tag or React Component (e.g. div, span, etc)
backButtonProps	BackButtonProps Props to spread on the back button. You almost certainly want to pass an `onClick` handler.
breadcrumbs	Breadcrumb[] An (optional) list of navigable links to prepend to the current title.
filters	ReactElement<any, string \| JSXElementConstructor<any>> An (optional) element displayed in the center of the header, typically used to render refinement/search UI.
metadata	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal
title	string ReactElement<any, string \| JSXElementConstructor<any>> The title of the element this header pertains to.
variant	"title" "breadcrumb"
withBackButton	false true If `true`, renders a leading back button within the header.

Import

Examples

Empty Header with title (variant name)

With breadcrumbs & back button

With actions

With filters

Props (API reference)

Name

Type

Default

Help improve this page