Header

The Header component exposes a way to build visually consistent hierarchy into apps that look and feel like part of the Contentful UI.

Note that the Header is not meant to be used when building navigation, for this case you will be better served by Navbar.

Import

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

Examples

Empty Header with title (variant name)

With breadcrumbs & back button

With actions

With filters

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

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.

withBackButton
false
true

If `true`, renders a leading back button within the header.