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
notificationprops. - 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.
Fixed header
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.
The Elastic navigation pattern
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.
Props
EuiHeader
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop sections# | Description and type An array of objects to wrap in a #EuiHeaderSection. EuiHeaderSections[] | Default value |
Prop position# | Description and type Helper that positions the header against the window body and "fixed" | "static" | Default value static |
Prop theme# | Description and type The "dark" | "default" | Default value default |
EuiHeaderSection
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop side# | Description and type Type: "left" | "right" | Default value |
Prop grow# | Description and type Type: boolean | Default value false |
EuiHeaderSectionItem
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop children# | Description and type ReactNode to render as this component's content ReactNode | Default value |
EuiHeaderSectionItemButton
Prop | Description and type | Default value |
|---|---|---|
Prop color# | Description and type Any of the named color palette options. "primary" | "text" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | Default value |
Prop size# | Description and type Type: "xs" | "s" | "m" | Default value |
Prop flush# | Description and type Ensure the text of the button sits flush to the left, right, or both sides of its container "left" | "right" | "both" | Default value |
Prop isDisabled# | Description and type
boolean | Default value |
Prop isLoading# | Description and type Force disables the button and changes the icon to a loading spinner boolean | Default value |
Prop isSelected# | Description and type Applies the boolean state as the boolean | Default value |
Prop href# | Description and type Type: string | Default value |
Prop target# | Description and type Type: string | Default value |
Prop rel# | Description and type Type: string | Default value |
Prop type# | Description and type Type: "button" | "reset" | "submit" | Default value |
Prop buttonRef# | Description and type Type: Ref<HTMLAnchorElement | HTMLButtonElement> | Default value |
Prop contentProps# | Description and type Object of props passed to the CommonProps & EuiButtonDisplayContentType | Default value |
Prop iconType# | Description and type Any IconType | Default value |
Prop iconSide# | Description and type Can only be one side ButtonContentIconSide | Default value |
Prop textProps# | Description and type Object of props passed to the This span wrapper can be removed by passing false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) | Default value |
Prop iconSize# | Description and type Type: "s" | "m" | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop onClick# | Description and type Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement> | Default value |
Prop notification# | Description and type Inserts the node into a EuiBadgeNotification and places it appropriately against the button. ReactNode | Default value |
Prop notificationColor# | Description and type Changes the color of the notification background "accent" | "success" | "subdued" | Default value accent |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<HTMLButtonElement & { euiAnimate: () => void; }> | Default value |
EuiHeaderLogo
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop children# | Description and type ReactNode to render as this component's content ReactNode | Default value |
Prop iconType# | Description and type Type: IconType | Default value logoElastic |
Prop iconTitle# | Description and type Type: string | Default value Elastic |
EuiHeaderBreadcrumbs
Prop | Description and type | Default value |
|---|---|---|
Prop breadcrumbs# | Description and type The array of individual #EuiBreadcrumb items EuiBreadcrumbProps[] | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop responsive# | Description and type Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller. Pass Default: boolean | EuiBreadcrumbResponsiveMaxCount | Default value |
Prop truncate# | Description and type Forces all breadcrumbs to single line and boolean | Default value |
Prop max# | Description and type Collapses the inner items past the maximum set here number | Default value |
Prop type# | Description and type Determines breadcrumbs appearance, with "page" | "application" | Default value |
Prop lastBreadcrumbIsCurrentPage# | Description and type Whether the last breadcrumb should be semantically highlighted as the boolean | Default value |