Flyout

EuiFlyout is a fixed position panel that pops in from the side of the window. It should be used to reveal more detailed contextual information or to provide complex forms without losing the user's current state. It is a good alternative to modals when the action is not transient.

Like modals, you control the visibility of the flyout using your own state management, but EuiFlyout requires an onClose handler for it's internal dismiss buttons.

Component

Accessibility requirement

Use aria-labelledby={headingId} to ensure the flyout is announced to screen readers.

Loading...

Usage

More complicated flyout

This component also comes with related child components for ease of creating headers, footers and scrolling body content. EuiFlyoutHeader and EuiFlyoutFooter are pinned to the top and bottom of the flyout, respectively, to allow for always visible navigation and actions. The EuiFlyoutBody component will then automatically overflow.

Loading...

Sizing

Flyouts come in three predefined sizes of 's' | 'm' | 'l', which define the width relative to the window size with a minimum width defined in pixels. You can otherwise supply your own fixed width in number or string format.

Loading...

Padding

All the inner flyout components inherit their padding from the wrapping EuiFlyout component. This ensures that all the horizontal edges line up no matter the paddingSize. When using the "none" size, you will need to accommodate your content with some other way of creating distance to the edges of the flyout.

Loading...

Banners

To highlight some information at the top of a flyout, you can pass an EuiCallOut to the banner prop available in EuiFlyoutBody and its layout will adjust appropriately.

Loading...

Without ownFocus

Like modals, you will usually want to obscure the page content beneath with ownFocus which wraps the flyout with an EuiOverlayMask . However, there are use-cases where flyouts present more information or controls, but need to maintain the interactions of the page content. By setting ownFocus={false}, the underlying page content will be visible and clickable.

Loading...

Understanding max-width

By default, flyouts will continue to grow with the width of the window. To stop this growth at an ideal width, set maxWidth to true, or pass your own custom size.

Note that there are some caveats to providing a maxWidth that is smaller than the minWidth.

Loading...

Focus management

EuiFlyout used with type="overlay" manages focus for keyboard navigation and accessibility. This ensures users can navigate modal content effectively, especially those using screen readers or keyboard-only navigation.

When a EuiFlyout is used, it will automatically:

1. Move focus to the flyout when opened
2. Trap focus inside the flyout while open
3. Return focus to the trigger element when closed

Manual return focus control

Use focusTrapProps to customize the focus behavior:

✄𐘗
tsx code block:
✄𐘗<EuiFlyout
  focusTrapProps={{
    returnFocus: (triggerElement) => {
      // Return true to use default behavior (focus triggerElement)
      // Return false to prevent default behavior
      if (customElement.current) {
        customElement.current.focus();
        return false;
      }
      return true;
    },
  }}
/>

Manually return focus when the trigger element is removed

If the trigger element is removed from the DOM before the flyout closes, focus will be "lost" to the document body. In this case, manually return focus to an appropriate element using focusTrapProps.returnFocus.

Push flyout

Another way to allow for continued interactions of the page content while a flyout is visible is to change the type from overlay to push.

Push flyouts require manual accessibility management

Push flyouts do not use a focus trap, do not close on Escape keypress, do not inherit a dialog role, and do not include any of the default screen reader guidance that overlay flyouts contain out-of-the-box.

Please be cautious when using push flyouts, and make sure you are managing your own focus and screen reader UX.

A pushed flyout still positions itself as fixed, but adds padding to the document's body element to accommodate for the flyout's width. Because this squishes the page content, the flyout changes back to overlay at smaller window widths. You can adjust this minimum breakpoint with pushMinBreakpoint.

Relative positioning

Push flyouts automatically set global CSS variables that you can use to position other elements in your application relative to the flyout's width:

• --euiPushFlyoutOffsetInlineStart (Set when side="left")
• --euiPushFlyoutOffsetInlineEnd (Set when side="right")

These variables are automatically updated when the flyout resizes and are removed when the flyout is closed.

✄𐘗
css code block:
✄𐘗.custom-fixed-sidebar {
  /* Adjust sidebar position when left push flyout is open */
  inset-inline-start: var(--euiPushFlyoutOffsetInlineStart, 0);
}

Loading...

Resizable flyout

Set the resizable={true} prop to render a flyout that users can drag with their mouse or use arrow keys to resize. This may be useful for scenarios where the available space can be unpredictable due to dynamic content. Resizable flyouts allow users to adjust content to better fit their personal screens and workflows.

Alternatively, you can also use the EuiFlyoutResizable component which is a thin wrapper around EuiFlyout that sets the resizable prop for you. When writing new code, we recommend using the regular EuiFlyout component with resizable={true} added.

We strongly recommend setting reasonable numerical minWidth and maxWidth props based on the flyout content and page content that you can predict.

Loading...

Flyout menu Beta

Note

This component is still in beta and may change in the future.

EuiFlyoutMenu is the top menu bar of a flyout. It is a private component, and is controlled by the flyoutMenuProps prop of EuiFlyout.

Loading...

In managed session flyouts, the Flyout Manager automatically adds a back button and a history popover control to the flyout menu for navigating to different flyout sessions within the managed context.

Guidelines

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.

Props

EuiFlyout

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onClose# ↦	Description and type A required callback function fired when the flyout is closed. Type: (event: EuiFlyoutCloseEvent) => void ↦	Default value Required ↵
Prop style# ↦	Description and type Type: CSSProperties ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop size# ↦	Description and type Defines the width of the panel. Pass a predefined size of s | m | l, or pass any number/string compatible with the CSS width attribute Type: Width<string | number> ↦	Default value m ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop side# ↦	Description and type Which side of the window to attach to. The left option should only be used for navigation. Type: "left" | "right" ↦	Default value right ↵
Prop maxWidth# ↦	Description and type Sets the max-width of the panel, set to true to use the default size, set to false to not restrict the width, set to a number for a custom width in px, set to a string for a custom width in custom measurement. Type: string | number | boolean ↦	Default value false ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop minWidth# ↦	Description and type Sets the minimum width of the panel. Especially useful when set with resizable = true. Type: number ↦	Default value ↵
Prop type# ↦	Description and type How to display the the flyout in relation to the body content; push keeps it visible, pushing the <body> content via padding Type: "push" | "overlay" ↦	Default value overlay ↵
Prop onResize# ↦	Description and type Optional callback that fires when the flyout is resized. Type: (width: number) => void ↦	Default value ↵
Prop paddingSize# ↦	Description and type Customize the padding around the content of the flyout header, body and footer Type: "s" | "m" | "l" | "none" ↦	Default value l ↵
Prop closeButtonProps# ↦	Description and type Extends EuiButtonIconProps onto the close button Type: Partial<EuiButtonIconPropsForButton> ↦	Default value ↵
Prop ownFocus# ↦	Description and type Adds an EuiOverlayMask and wraps in an EuiPortal Type: boolean ↦	Default value true ↵
Prop hideCloseButton# ↦	Description and type Hides the default close button. You must provide another close button somewhere within the flyout. Type: boolean ↦	Default value false ↵
Prop closeButtonPosition# ↦	Description and type Position of close button. inside: Floating to just inside the flyout, always top right; outside: Floating just outside the flyout near the top (side dependent on side). Helpful when the close button may cover other interactable content. Type: "inside" | "outside" ↦	Default value inside ↵
Prop maskProps# ↦	Description and type Adjustments to the EuiOverlayMask that is added when ownFocus = true Type: EuiOverlayMaskProps ↦	Default value ↵
Prop outsideClickCloses# ↦	Description and type Forces this interaction on the mask overlay or body content. Defaults depend on ownFocus and type values Type: boolean ↦	Default value ↵
Prop pushMinBreakpoint# ↦	Description and type Named breakpoint (xs through xl) for customizing the minimum window width to enable the push type Type: string ↦	Default value l ↵
Prop pushAnimation# ↦	Description and type Enables a slide in animation on push flyouts Type: boolean ↦	Default value false ↵
Prop hasChildBackground# ↦	Description and type When the flyout is used as a child in a managed flyout session, setting true gives the shaded background style. Type: boolean ↦	Default value false ↵
Prop focusTrapProps# ↦	Description and type Object of props passed to EuiFocusTrap. shards specifies an array of elements that will be considered part of the flyout, preventing the flyout from being closed when clicked. closeOnMouseup will delay the close callback, allowing time for external toggle buttons to handle close behavior. returnFocus defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus Type: Pick<EuiFocusTrapProps, "returnFocus" | "shards" | "closeOnMouseup"> ↦	Default value ↵
Prop includeFixedHeadersInFocusTrap# ↦	Description and type By default, EuiFlyout will consider any fixed EuiHeaders that sit alongside or above the EuiFlyout as part of the flyout's focus trap. This prevents focus fighting with interactive elements within fixed headers. Set this to false if you need to disable this behavior for a specific reason. Type: boolean ↦	Default value ↵
Prop includeSelectorInFocusTrap# ↦	Description and type Specify additional css selectors to include in the focus trap. Type: string | string[] ↦	Default value ↵
Prop flyoutMenuProps# ↦	Description and type Props for the flyout menu to have one rendered in the flyout. If used, the close button will be automatically hidden, as the flyout menu has its own close button. Type: EuiFlyoutMenuProps ↦	Default value ↵
Prop resizable# ↦	Description and type Whether the flyout should be resizable. Type: boolean ↦	Default value false ↵
Prop as# ↦	Description and type The HTML element to render as the flyout container. Type: "div" | "nav" ↦	Default value ↵
Prop session# ↦	Description and type Controls the way the session is managed for this flyout. start: Creates a new flyout session. Use this for the main flyout. inherit: Inherits an existing session if one is active, otherwise functions as a standard flyout. never: Disregards session management and always functions as a standard flyout. When the session prop is undefined (not set), the flyout will automatically inherit from a parent flyout if it's nested inside one. Otherwise, it defaults to never. Check out EuiFlyout session management documentation to learn more. Type: "inherit" | "start" | "never" ↦	Default value undefined (auto-inherit when nested, otherwise 'never') ↵
Prop onActive# ↦	Description and type Callback fired when the flyout becomes active/visible, which may happen programmatically from history navigation. Type: () => void ↦	Default value ↵
Prop ref# ↦	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: LegacyRef<HTMLElement | HTMLDivElement> ↦	Default value ↵

𐘂𐘂

EuiFlyoutBody

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop banner# ↦	Description and type Use to display a banner at the top of the body. It is suggested to use EuiCallOut for it. Type: ReactNode ↦	Default value ↵
Prop scrollableTabIndex# ↦	Description and type Scrollable regions (or their children) should be focusable to allow keyboard users to scroll the region via arrow keys. By default, EuiFlyoutBody's scroll overflow wrapper sets a tabIndex of 0. If you know your flyout body content already contains focusable children that satisfy keyboard accessibility requirements, you can use this prop to override this default. Type: number ↦	Default value 0 ↵

𐘂𐘂

EuiFlyoutFooter

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiFlyoutHeader

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop hasBorder# ↦	Description and type Type: boolean ↦	Default value false ↵

𐘂𐘂

EuiFlyoutMenu

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop titleId# ↦	Description and type An id to use for the title element. Useful for setting aria-labelledby on the flyout. Example: ✄𐘗 jsx code block: ✄𐘗<EuiFlyout aria-labelledby="myMenuTitleId" flyoutMenuProps={{ title: 'Menu title', titleId: 'myMenuTitleId' } > ... </EuiFlyout> Type: string ↦	Default value ↵
Prop hideTitle# ↦	Description and type Hides the title in the EuiFlyoutMenu. This is useful when the title is already shown in an EuiFlyoutHeader. Type: boolean ↦	Default value true for main flyout in a managed flyout session; false otherwise ↵
Prop hideCloseButton# ↦	Description and type Hides the close button in the menu component Type: boolean ↦	Default value false ↵
Prop showBackButton# ↦	Description and type Shows a back button in the menu component Type: boolean ↦	Default value false ↵
Prop backButtonProps# ↦	Description and type Props to pass to the back button, such as onClick handler Type: EuiFlyoutMenuBackButtonProps ↦	Default value ↵
Prop historyItems# ↦	Description and type List of history items for the history popover Type: EuiFlyoutHistoryItem[] ↦	Default value [] ↵
Prop customActions# ↦	Description and type List of custom action items for the menu component Type: EuiFlyoutMenuCustomAction[] ↦	Default value ↵

𐘂𐘂