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 EuiBreadrumbs.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.