Import
import { Header } from '@contentful/f36-components';// orimport { 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 StorybookName | 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. |