kibana_page_template.mdx

id	slug	title	summary	date	tags
kibDevDocsKBLTutorial	/kibana-dev-docs/tutorials/kibana-page-layout	KibanaPageLayout component	Learn how to create pages in Kibana	2021-03-20	kibana dev ui tutorials

KibanaPageLayout is a thin wrapper around EuiPageTemplate that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.

Refer to EUI's documentation on EuiPageTemplate for constructing page layouts.

isEmptyState

Use the isEmptyState prop for when there is no page content to show. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met.

The default empty state uses any pageHeader info provided to populate an EuiEmptyPrompt and uses the centeredBody template type.

<KibanaPageLayout
  isEmptyState={true}
  pageHeader={{
    iconType: 'dashboardApp',
    pageTitle: 'Dashboards',
    description: "You don't have any dashboards yet.",
    rightSideItems: [
      <EuiButton fill iconType="plusInCircleFilled">
        Create new dashboard
      </EuiButton>,
    ],
  }}
/>

Because all properties of the page header are optional, the empty state has the potential to render blank. Make sure your empty state doesn't leave the user confused.

Custom empty state

You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any pageHeader props and pass an EuiEmptyPrompt directly as the child of KibanaPageLayout.

<KibanaPageLayout isEmptyState={true}>
  <EuiEmptyPrompt
    title={<h1>No data</h1>}
    body="You have no data. Would you like some of ours?"
    actions={[
      <EuiButton fill iconType="plusInCircleFilled">
        Get sample data
      </EuiButton>,
    ]}
  />
</KibanaPageLayout>

Empty states with a page header

When passing both a pageHeader configuration and isEmptyState, the component will render the proper template (centeredContent). Be sure to reduce the heading level within your child empty prompt to <h2>.

<KibanaPageLayout
  isEmptyState={true}
  pageHeader={{
    pageTitle: 'Dashboards',
  }}
>
  <EuiEmptyPrompt
    title={<h2>No data</h2>}
    body="You have no data. Would you like some of ours?"
    actions={[
      <EuiButton fill iconType="plusInCircleFilled">
        Get sample data
      </EuiButton>,
    ]}
  />
</KibanaPageLayout>

solutionNav

To add left side navigation for your solution, we recommend passing EuiSideNav props to the solutionNav prop. The template component will then handle the mobile views and add the solution nav embellishments. On top of the EUI props, you'll need to pass your solution name and an optional icon.

If you need to custom side bar content, you will need to pass you own navigation component to pageSideBar. We still recommend using EuiSideNav.

When using EuiSideNav, root level items should not be linked but provide section labelling only.

<KibanaPageLayout
  solutionNav={{
    name: 'Management',
    icon: 'managementApp',
    items: [
      {
        name: 'Root item',
        items: [
          { name: 'Navigation item', href: '#' },
          { name: 'Navigation item', href: '#' },
        ]
      }
    ]
  }}
>
  {...}
</KibanaPageLayout>