Flyout session management Beta

EuiFlyout comes with opt-in flyout session management built in that lets you effortlessly create complex flyout compositions and journeys. It handles side-by-side flyout rendering based on parent-child grouping, simple flyout transitions, state sharing, and more.

Loading...

Sessions

The session prop is the key ingredient needed to create managed flyouts. When set to start, it activates the underlying flyout session management logic which handles virtually everything you need to create multi-flyout user flows including side-by-side flyouts and flyout stacks with history support.

Managed flyouts work seamlessly with other managed and unmanaged (regular) flyouts across the application, so you can begin integrating them without worry about compatibility issues.

Each time you set session="start", you create a new flyout session and mark the rendered flyout as main. To create a child flyout - a flyout that belongs to the same session as the main flyout - you can set session="inherit" or omit the session prop entirely, as "inherit" is the default behavior. All bindings and configuration will be handled automatically.

Session title

Managed flyout sessions require a title that can be referenced in the history navigation features. Use the title field of the flyoutMenuProps to set the title of the flyout session. If flyoutMenuProps is omitted or a title field is not given in flyoutMenuProps, the manager will use the aria-label attribute of EuiFlyout as the source for the session's title. If no source for a title is given, a default title will be provided.

Note

The "main" flyout in a session should use EuiFlyoutHeader for the actual flyout heading. For this reason, the title given from flyoutMenuProps will not be visible to end users. However, a title is still needed for the history navigation feature of the flyout session management system.

✄𐘗
tsx code block:
✄𐘗{/* Render a new main flyout and create a flyout session */}
<EuiFlyout
  session="start"
  flyoutMenuProps={{
    title: 'My main flyout'
  }}
  aria-labelledby="myFlyoutHeading"
>
  <EuiFlyoutHeader>
    <EuiTitle>
      <h2 id="myFlyoutHeading">
        I'm the main flyout heading
      </h2>
    </EuiTitle>
  </EuiFlyoutHeader>
  <EuiFlyoutBody>
    I'm the main flyout body
  </EuiFlyoutBody>
  {/* Render a new child flyout - notice the lack of the `session` prop */}
  <EuiFlyout
    flyoutMenuProps={{
      title: 'My child flyout'
    }}
  >
    {/* Render a child flyout contents. Notice the lack of the EuiFlyoutHeader component - the child flyout menu shows the title from flyoutMenuProps */}
    <EuiFlyoutBody>
      I'm the child flyout that belongs to the same session as the main flyout
    </EuiFlyoutBody>
  </EuiFlyout>
</EuiFlyout>

To prevent a flyout from being a part of the session management system, you can set session="never" which will render it as a regular unmanaged flyout.

✄𐘗
tsx code block:
✄𐘗<>
  {/* Render a new main flyout and create a flyout session */}
  <EuiFlyout
    session="start"
    flyoutMenuProps={{
      title: 'My flyout in a session'
    }}
  >
    <EuiFlyoutBody>
      I'm the main flyout in a session
    </EuiFlyoutBody>
  </EuiFlyout>
  {/* Render a non-session flyout */}
  <EuiFlyout session="never">
    I'm a flyout that will not be part of any flyout session
  </EuiFlyout>
</>

Types of managed flyouts

While users of managed flyouts don't need to think about the types of managed flyouts or the internals behind them, it's beneficial to understand what differentiates the two types - main and child.

Main flyouts

Main flyouts are the backbone of EuiFlyout's session management. Each flyout with session="start" prop creates a new session and becomes the main flyout in that session. They're included in the history and can be jumped back to using the history popover.

Main flyouts are meant to display primary level information like the overview of an alert.

Child flyouts

Child flyouts are directly related to a main flyout in their session. They're created by rendering a EuiFlyout without the session prop inside a main flyout - a flyout with session="start" prop set.

They're meant to display secondary level information like the alert visualization.

Child flyouts accept an optional hasChildBackground boolean prop that lets you change the style of the flyout background to shaded (colors.backgroundBaseSubdued).

On smaller screens, child flyouts stack above the parent.

Accessibility

Both parent and child flyouts use role="dialog" and aria-modal="true" for accessibility. Focus is managed automatically between them, with the child flyout taking focus when open and returning focus to the parent when closed.