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

Flyout sessions within the managed system 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.

✄𐘗
tsx code block:
✄𐘗{/* Render a new main flyout and create a flyout session */}
<EuiFlyout
  session="start"
  flyoutMenuProps={{
    title: 'My main flyout'
  }}
>
  <EuiFlyoutBody>
    I'm the main flyout
  </EuiFlyoutBody>
  {/* Render a new child flyout - notice the lack of the `session` prop */}
  <EuiFlyout
    flyoutMenuProps={{
      title: 'My child flyout'
    }}
  >
    I'm the child flyout that belongs to the same session as the main flyout
  </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.