@contentful/f36-header

title: 'Header' type: 'layout' slug: /components/header/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/header' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-header--default' typescript: ./src/Header.tsx

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

Basic Header with title

With breadcrumbs & back button

With actions

With filters

Header areas

prop	description	Expected content
breadcrumbs	An (optional) list of navigable links to prepend to the current title.	Array of breadcumbs
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

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)