Collapsible nav

This is a high level component that creates a flyout-style navigational pane.

EuiCollapsibleNav is a custom implementation of EuiFlyout; the visibility of which must still be maintained by the consuming application. An extra feature that it provides is the ability to dock the flyout. This affixes the flyout to the window and pushes the body content by adding left side padding.

warning

Docking is not possible on small screens because it would force less real estate for the page content.

Collapsible nav group

An EuiCollapsibleNavGroup adds some basic borders and background color of none, light, or dark. Give each section a heading by providing an optional title and iconType. Make the section collapsible (accordion style) with isCollapsible=true.

When in isCollapsible mode, a title and initialIsOpen:boolean is required.

Nav groups with lists and other content

EuiCollapsibleNavGroups can contain any children. They work well with EuiListGroup, EuiPinnableListGroup and simple EuiText.

Below are a few established patterns to use.

Full pattern with header and saved pins

Putting it all together

The button below will launch a fullscreen example that includes EuiHeader with a toggle button to open an EuiCollapsibleNav. The contents of which are multiple EuiCollapsibleNavGroups and saves the open/closed/pinned state for each section and item in local store.

This is just a pattern and should be treated as such. Consuming applications will need to create the navigation groups according to their context and save the states as is appropriate to their data store.

Props

EuiCollapsibleNav

Extends HTMLAttributes


Prop	Description and type	Default value
Prop onClose#	Description and type Type: `(event: MouseEvent \| KeyboardEvent \| TouchEvent) => void`	Default value Required
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 `320`
Prop children#	Description and type ReactNode to render as this component's content Type: `ReactNode`	Default value
Prop style#	Description and type Type: `CSSProperties`	Default value
Prop className#	Description and type Type: `string`	Default value
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 `left`
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 paddingSize#	Description and type Customize the padding around the content of the flyout header, body and footer Type: `"s" \| "m" \| "l" \| "none"`	Default value `none`
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: `string \| ((instance: HTMLDivElement) => void) \| RefObject<HTMLDivElement> \| ((instance: HTMLElement) => void) \| RefObject<HTMLElement>`	Default value
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 `outside`
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 `true`
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 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. Type: `Pick<EuiFocusTrapProps, "shards" \| "closeOnMouseup">`	Default value
Prop includeFixedHeadersInFocusTrap#	Description and type By default, EuiFlyout will consider any fixed `EuiHeader`s 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 as#	Description and type Sets the HTML element for `EuiFlyout` Type: `"div" \| "nav"`	Default value `nav`
Prop isOpen#	Description and type Shows the navigation flyout Type: `boolean`	Default value `false`
Prop isDocked#	Description and type Keeps navigation flyout visible and push `<body>` content via padding Type: `boolean`	Default value `false`
Prop dockedBreakpoint#	Description and type Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable docking Type: `string`	Default value `l`
Prop button#	Description and type Button for controlling visible state of the nav Type: `ReactElement`	Default value
Prop showButtonIfDocked#	Description and type Keeps the display of toggle button when in docked state Type: `boolean`	Default value `false`

EuiCollapsibleNavGroup

Extends HTMLAttributes


Prop	Description and type	Default value
Prop element#	Description and type Applied to the entire .euiAccordion wrapper. When using `fieldset`, it will enforce `buttonElement = legend` as well. Type: `"div" \| "fieldset"`	Default value
Prop isLoading#	Description and type Change `extraAction` and children into a loading spinner Type: `boolean`	Default value
Prop isDisabled#	Description and type Disable the open/close interaction and visually subdues the trigger Type: `boolean`	Default value
Prop buttonClassName#	Description and type Class that will apply to the trigger for the accordion. Type: `string`	Default value
Prop buttonProps#	Description and type Apply more props to the triggering button. Includes optional `paddingSize` prop which allows sizes of `s`, `m`, or `l`. Note: Padding will not be present on the side closest to the accordion arrow. Type: `CommonProps & HTMLAttributes<HTMLElement> & { paddingSize?: "s" \| "m" \| "l"; }`	Default value
Prop buttonContentClassName#	Description and type Class that will apply to the trigger content for the accordion. Type: `string`	Default value
Prop buttonContent#	Description and type The content of the clickable trigger Type: `ReactNode`	Default value
Prop buttonElement#	Description and type Applied to the main button receiving the `onToggle` event. Anything other than the default `button` does not support removing the arrow display (for accessibility of focus). Type: `"button" \| "div" \| "legend"`	Default value
Prop arrowProps#	Description and type Extra props to pass to the EuiButtonIcon containing the arrow. Type: `Partial<Omit<EuiButtonIconProps, "iconType" \| "onClick" \| "aria-labelledby">>`	Default value
Prop extraAction#	Description and type Will appear right aligned against the button. Useful for separate actions like deletions. Type: `ReactNode`	Default value
Prop initialIsOpen#	Description and type The accordion will start in the open state. Type: `boolean`	Default value
Prop onToggle#	Description and type Optional callback method called on open and close with a single `isOpen` parameter Type: `(isOpen: boolean) => void`	Default value
Prop paddingSize#	Description and type The padding around the exposed accordion content. Type: `"xs" \| "s" \| "m" \| "l" \| "xl" \| "none"`	Default value
Prop arrowDisplay#	Description and type Placement of the arrow indicator, or 'none' to hide it. Type: `"none" \| "left" \| "right"`	Default value
Prop borders#	Description and type Optional border styling. Defaults to 'none'. Type: `"none" \| "horizontal" \| "all"`	Default value
Prop forceState#	Description and type Control the opening of accordion via prop Type: `"open" \| "closed"`	Default value
Prop isLoadingMessage#	Description and type Choose whether the loading message replaces the content. Customize the message by passing a node Type: `ReactNode`	Default value
Prop children#	Description and type ReactNode to render as this component's content Type: `ReactNode`	Default value
Prop iconType#	Description and type Sits left of the `title` and only when `title` is present Type: `IconType`	Default value
Prop iconSize#	Description and type Change the size of the icon in the `title` Type: `"s" \| "m" \| "l" \| "xl" \| "xxl" \| "original"`	Default value `l`
Prop iconProps#	Description and type Further extend the props applied to EuiIcon Type: `Omit<EuiIconProps, "size" \| "type">`	Default value
Prop id#	Description and type Optionally provide an id, otherwise one will be created Type: `string`	Default value
Prop background#	Description and type Adds a background color to the entire group, applying the correct text color to the `title` only Type: `"light" \| "dark" \| "none"`	Default value `none`
Prop titleElement#	Description and type Determines the title's heading element Type: `"h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "span"`	Default value `h3`
Prop titleSize#	Description and type Title sizing equivalent to EuiTitle, but only `s` and smaller Type: `"xs" \| "s" \| "xxxs" \| "xxs"`	Default value `xxs`
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 isCollapsible#	Description and type If `true`, wraps children in the body of an accordion, requiring the prop `title` to be used as the button. When `false`, simply renders a div without any accordion functionality. Type: `boolean`	Default value `false`
Prop title#	Description and type The title gets wrapped in the appropriate heading level with the option to add an iconType Type: `ReactNode`	Default value