Page header
While the EuiPageHeader component can be placed anywhere within your page layout, we recommend using it within the EuiPageTemplate component by passing the configuration props as its pageHeader.
EuiPageHeader provides props for opinionated, consistent formatting of your header. Any combination of pageTitle, description, tabs, or any children will adjust the layout as needed.
An additional prop rightSideItems allows for a simple array of nodes which will layout in a flexbox row. This is commonly used for adding multiple buttons, of which, at least one should be primary (adding fill="true"). These items are also displayed in reverse order so that the first and primary array item will be displayed on the far right.
You can further adjust the display of these content types with an optional iconType placed to the left of the title, alignItems for adjusting the vertical alignment of the two sides, and responsiveOrder to determine which content side to display first on smaller screens.
Tabs in the page header
A set of tabs can be displayed inside the page header by passing an array of EuiTab objects using the label key for the tab content. When displaying tabs, the bottomBorder prop will be enforced to create separation of the header and content. You'll still need to manage the page content and selected tab in your own instance.
When supplying tabs without a pageTitle, EuiPageHeader will promote those tabs as if they are the page title. This means that any description or children will sit below the tabs and should used to describe the currently selected tab.
Breadcrumbs in the page header
Breadcrumbs are useful for tracking in-page flows that are not part of the entire application architecture. To make this easy EuiPageHeader provides a breadcrumbs prop that accepts the same configuration as EuiBreadcrumbs.breadcrumbs.
A common pattern is to use a single breadcrumb to return the user to a listing page from which the current page was navigated to.
Customizing the page header
The page header content props are helpful props to push content into established Elastic page layout patterns. They are completely optional and by design, inflexible. If you need a layout that does not match these patterns you can pass in your own children utilizing the EuiPageHeaderSection components.
Props
EuiPageHeader
Prop | Description and type | Default value |
|---|---|---|
Prop paddingSize# | Description and type Adjust the overall padding. "s" | "xs" | "m" | "l" | "xl" | "none" | Default value none |
Prop color# | Description and type Define the header background color "transparent" | "plain" | Default value transparent |
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 iconType# | Description and type Optional icon to place to the left of the title IconType | Default value |
Prop responsive# | Description and type Set to false if you don't want the children to stack at small screen sizes. boolean | "reverse" | Default value true |
Prop breadcrumbs# | Description and type Optional array breadcrumbs that render before the EuiBreadcrumbProps[] | Default value |
Prop description# | Description and type Position is dependent on existing with a ReactNode | Default value |
Prop iconProps# | Description and type Additional EuiIcon props to apply to the optional icon Partial<Omit<EuiIconProps, "type">> | Default value |
Prop alignItems# | Description and type Vertical alignment of the left and right side content; "center" | "top" | "bottom" | "stretch" | Default value |
Prop restrictWidth# | Description and type Sets the max-width of the page, string | number | boolean | Default value false |
Prop rightSideItems# | Description and type Pass custom an array of content to this side usually up to 3 buttons. ReactNode[] | Default value |
Prop rightSideGroupProps# | Description and type Additional EuiFlexGroup props to pass to the container of the Partial<EuiFlexGroupProps> | Default value |
Prop pageTitle# | Description and type Wrapped in an ReactNode | Default value |
Prop pageTitleProps# | Description and type Additional props to pass to the EuiTitle Omit<EuiTitleProps, "children" | "size"> | Default value |
Prop breadcrumbProps# | Description and type Adjust the props of [EuiBreadcrumbs](#/navigation/breadcrumbs) Partial<Omit<EuiBreadcrumbsProps, "breadcrumbs">> | Default value |
Prop tabs# | Description and type In-app navigation presented as large borderless tabs. Tab[] | Default value |
Prop tabsProps# | Description and type Any extras to apply to the outer tabs container. Omit<EuiTabsProps, "size" | "expand"> | Default value |
Prop bottomBorder# | Description and type Adds a bottom border to separate it from the content after; boolean | "extended" | Default value |
EuiPageHeaderContent
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 bottomBorder# | Description and type If not set, defaults to true if boolean | Default value |
Prop paddingSize# | Description and type Adjust the padding. "s" | "xs" | "m" | "l" | "xl" | "none" | Default value |
Prop responsive# | Description and type Set to false if you don't want the children to stack at small screen sizes. boolean | "reverse" | Default value true |
Prop alignItems# | Description and type Vertical alignment of the left and right side content; "center" | "top" | "bottom" | "stretch" | Default value |
Prop rightSideItems# | Description and type Pass custom an array of content to this side usually up to 3 buttons. ReactNode[] | Default value |
Prop rightSideGroupProps# | Description and type Additional EuiFlexGroup props to pass to the container of the Partial<EuiFlexGroupProps> | Default value |
Prop description# | Description and type Position is dependent on existing with a ReactNode | Default value |
Prop pageTitle# | Description and type Wrapped in an ReactNode | Default value |
Prop pageTitleProps# | Description and type Additional props to pass to the EuiTitle Omit<EuiTitleProps, "children" | "size"> | Default value |
Prop iconType# | Description and type Optional icon to place to the left of the title IconType | Default value |
Prop iconProps# | Description and type Additional EuiIcon props to apply to the optional icon Partial<Omit<EuiIconProps, "type">> | Default value |
Prop breadcrumbs# | Description and type Optional array breadcrumbs that render before the EuiBreadcrumbProps[] | Default value |
Prop breadcrumbProps# | Description and type Adjust the props of [EuiBreadcrumbs](#/navigation/breadcrumbs) Partial<Omit<EuiBreadcrumbsProps, "breadcrumbs">> | Default value |
Prop tabs# | Description and type In-app navigation presented as large borderless tabs. Tab[] | Default value |
Prop tabsProps# | Description and type Any extras to apply to the outer tabs container. Omit<EuiTabsProps, "size" | "expand"> | Default value |
Prop restrictWidth# | Description and type Sets the max-width of the page, string | number | boolean | Default value |