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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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 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 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 ↵

𐘂𐘂