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 - either:

• Render it inside a main flyout's children (nested in the JSX tree), OR
• Set session="inherit" explicitly (required for cross-React-root scenarios)

When a flyout is nested inside a parent flyout and doesn't have an explicit session prop, it will automatically inherit the session. 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 title from flyoutMenuProps is hidden from the menu on main flyouts (which should use EuiFlyoutHeader for the visible heading) but is displayed in the menu of child flyouts. For main flyouts, the title is primarily used for history navigation.

✄𐘗
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>
  <EuiFlyout
    session="inherit"
    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:

• Set session="never" explicitly, OR
• Don't nest it inside any parent flyout (non-nested flyouts default to standard behavior)

To force a nested flyout to remain a standard flyout even when inside a parent, explicitly set session="never". This 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 an EuiFlyout inside a main flyout's children (nested in the JSX tree), which causes it to automatically inherit the session. Alternatively, you can explicitly set session="inherit" when rendering outside the parent's JSX tree while an active main flyout (with session="start") exists.

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.