Header

The header is made up of many individual components starting with EuiHeader as the container. You can manually configure your header with the following related components:

EuiHeaderSection: Left/right containers with flex properties.
EuiHeaderSectionItem: Containers for individual header items as flex items.
EuiHeaderSectionItemButton: Specialized button that extends EuiButtonEmpty but styled to fit the height of the header with additional notification props.
EuiHeaderLogo: A helpful component for creating a linked logo that fits within the header sizing.
EuiHeaderBreadcrumbs: A set of EuiBreadcrumbs specifically stylized to fit inside the header.

Sections

Alternatively, you can pass an array of objects to the sections prop that takes a key of items (array of children to wrap in an EuiHeaderSectionItem) and/or breadcrumbs (array of breadcrumb objects). Each item in the array will be wrapped in an EuiHeaderSection.

Note: Passing sections and children will disregard the children as it is not easily interpreted at what location the children should be placed.

Header links

In addition to the components mentioned prior, which lend themselves to more application style navigation patterns, EuiHeaderLinks and EuiHeaderLink supply the ability to inline a list of navigational or menu style links.

EuiHeaderLinks comes with responsive functionality built-in which will convert the inline list of links to a popover list triggered by a EuiHeaderSectionItemButton. You can adjust at which breakpoints to switch to the popover display by passing your own array of named breakpoints to popoverBreakpoints.

Most consumers need a header that does not scroll away with the page contents. You can set this display by applying the property position="fixed". Multiple fixed headers will automatically stack underneath one another. No manual positioning is required.

If you're using EuiPageTemplate, a padding top will be automatically set based on the number of fixed headers on the page. EuiFlyouts will also automatically account for and sit below fixed headers.

If you're using your own custom layout, or have custom UI that needs to sit below your fixed header(s), EUI provides a global CSS var(--euiFixedHeadersOffset) variable. You can use this variable anywhere, or even override it, to correctly offset any and all fixed header heights.

Dark theme

To make site-wide navigation more prominent, EuiHeader supports reversing the colors to dark theme with theme="dark". However, it only supports a limited set of children that will also shift their theme. These components include EuiHeaderLogo, EuiHeaderLink(s), EuiHeaderSectionItemButton and EuiSelectableTemplateSitewide. Any other content may not render correctly without custom configurations.

Portal content in the header

Use an EuiHeaderSectionItemButton to display additional information in popovers or flyouts, such as a user profile or news feed. When using EuiFlyout, be sure to wrap it in a EuiPortal. When using an EuiPopover in conjunction with a fixed header, be sure to add the repositionOnScroll prop to the popover.

The example below shows how to incorporate EuiHeaderAlert components to show a list of updates inside a EuiFlyout and a EuiPopover .

Header notifications

To alert or notify users about the additional information they are receiving, use the EuiHeaderSectionItemButton notification prop. You can pass a node that will render inside a EuiBadgeNotification or pass true to render a simple dot. You can also animate the button by calling the euiAnimate() method on the EuiHeaderSectionItemButton ref.

Stacked headers

Stacking multiple headers provides a great way to separate global navigation concerns.

Putting it all together

The button below will launch a fullscreen example that includes two EuiHeaders with all the appropriate navigation pieces including EuiCollapsibleNav, EuiHeaderAlerts, user menu, deployment switcher, space selector, EuiHeaderBreadcrumbs and EuiHeaderLinks for app menu items.

This is just a pattern and should be treated as such. Consuming applications will need to recreate the pattern according to their context and save the states as is appropriate to their data store.