Import

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

Header areas

The Header offers different areas for certain content. These are there to ensure the proper alignment and styling for the contents provided.

Prop	Description	Expected content
`breadcrumbs`	An (optional) list of navigable links to prepend to the current title.	Array of breadcrumbs
`title`	The title of the element this header pertains to. If handed over a string, it will wrap it in a heading element (default: h1).	Title string or `ReactElement`
`metadata`	Optional additional information to display in the header, will appear after the title.	`Text`, `Badge`, `Tag`
`filters`	Optional element displayed in the center of the header, typically used to render refinement/search UI.	`TextInput`, `Select`, `Search`
`actions`	Optional elements to display as complementary actions (e.g. buttons) related to the current page/route.	`Button`, `IconButton`, `Dropdown`

Examples

Basic Header with title

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'),
        },
      ]}
    />
  );
}

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

Open in Playground

With filters

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

Open in Playground

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.

Props (API reference)

Open in Storybook

Name	Type	Default
actions	ReactElement<unknown, string \| JSXElementConstructor<any>> ReactElement<unknown, string \| JSXElementConstructor<any>>[] Optional JSX children to display as complementary actions (e.g. buttons) related to the current page/route.
as	"a" "abbr" "address" "animate" "animateMotion" "animateTransform" "area" "article" "aside" "audio" "b" "base" "bdi" "bdo" "big" "blockquote" "body" "br" "button" "canvas" "caption" "center" "circle" "cite" "clipPath" "code" "col" "colgroup" "data" "datalist" "dd" "defs" "del" "desc" "details" "dfn" "dialog" "div" "dl" "dt" "ellipse" "em" "embed" "feBlend" "feColorMatrix" "feComponentTransfer" "feComposite" "feConvolveMatrix" "feDiffuseLighting" "feDisplacementMap" "feDistantLight" "feDropShadow" "feFlood" "feFuncA" "feFuncB" "feFuncG" "feFuncR" "feGaussianBlur" "feImage" "feMerge" "feMergeNode" "feMorphology" "feOffset" "fePointLight" "feSpecularLighting" "feSpotLight" "feTile" "feTurbulence" "fieldset" "figcaption" "figure" "filter" "footer" "foreignObject" "form" "g" "h1" "h2" "h3" "h4" "h5" "h6" "head" "header" "hgroup" "hr" "html" "i" "iframe" "image" "img" "input" "ins" "kbd" "keygen" "label" "legend" "li" "line" "linearGradient" "link" "main" "map" "mark" "marker" "mask" "menu" "menuitem" "meta" "metadata" "meter" "mpath" "nav" "noindex" "noscript" "object" "ol" "optgroup" "option" "output" "p" "param" "path" "pattern" "picture" "polygon" "polyline" "pre" "progress" "q" "radialGradient" "rect" "rp" "rt" "ruby" "s" "samp" "script" "search" "section" "select" "set" "slot" "small" "source" "span" "stop" "strong" "style" "sub" "summary" "sup" "svg" "switch" "symbol" "table" "tbody" "td" "template" "text" "textarea" "textPath" "tfoot" "th" "thead" "time" "title" "tr" "track" "tspan" "u" "ul" "use" "var" "video" "view" "wbr" "webview" ComponentClass<any, any> FunctionComponent<any>
backButtonProps	BackButtonProps Ensure that backbutton props can not be passed when `withBackButton` is false. This is to prevent confusion, as the back button will not be rendered. 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.
className	string CSS class to be appended to the root element
filters	ReactElement<unknown, string \| JSXElementConstructor<any>> An (optional) element displayed in the center of the header, typically used to render refinement/search UI.
metadata	string number bigint false true ReactElement<unknown, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal Promise<AwaitedReactNode>
testId	string A [data-test-id] attribute used for testing purposes
title	string ReactElement<unknown, string \| JSXElementConstructor<any>> The title of the element this header pertains to.
titleProps	{ as?: HeadingElement; size?: "medium" \| "large"; }
withBackButton	false true If `true`, renders a leading back button within the header.

Import

Header areas

Prop

Description

Expected content

Examples

Basic Header with title

With breadcrumbs & back button

With actions

With filters

Accessibility

Props (API reference)

Name

Type

Default

Help improve this page