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.

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.

Open demo

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