Side nav

EuiSideNav is a responsive menu system that usually sits on the left side of a page layout. It will expand to the width of its container. This is the same menu system used for the EUI documentation.

Configure the content of a EuiSideNav by passing in an items prop. Refer to the source code for an example of this data structure’s anatomy.

The responsive behavior converts the list into an accordion style component with a mobile only button.

You will need to pass a string to the prop mobileTitle to label the mobile button.

Side nav heading

Since EuiSideNav renders a <nav> section element, it is recommended that the element contain a heading. Pass a string or node to the heading prop to display within an <h2>. Though you can also adjust this heading element with headingProps.element.

If the heading is visually unnecessary for your application, pass headingProps.screenReaderOnly to ensure proper accessibility for those using assitive technology.

note

When providing a heading, this will then be the default display for the mobile button title.

Complex side nav

EuiSideNav also supports multiple top level sections and deeply-nested tree-based data.

We recommend being consistent with the use of the root level item and whether it is used solely for labelling a section. Intermixing linked and non-linked root items will confuse the user. Stay consistent throughout your entire application and platform.

Nested item options

Typically, the children of nested items progressively shows as users traverse the pages themselves. However, you can bypass this functionality and force open items by setting items[n].forceOpen = true.

Arrow indicators will show only if the item has children but does not have an interaction itself. The component will then handle the toggling of the displayed children as well.

Emphasized side nav sections

Adding the emphasize = true prop to a EuiSideNav item will enhance the visual appearance of that section and its nested items. This is helpful for when you need to indicate a dynamic navigational item like a user-created object.

Extra style needed

The emphasized nav item's background color extends beyond the horizontal bounds of the component to allow it to reach it's parents bounds. Be sure to add overflow: hidden to whichever container you'd like it to stop at.

Props

EuiSideNav


Prop	Description and type	Default value
Prop items#	Description and type An array of #EuiSideNavItem objects. Lists navigation menu items. Type: `EuiSideNavItemType<{}>[]`	Default value Required
Prop children#	Description and type `children` are not rendered. Use `items` to specify navigation items instead. Type: `never`	Default value
Prop className#	Description and type Class names to be merged into the final `className` property. Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop heading#	Description and type Creates an associated heading element and uses the same node as default for `mobileTitle` Type: `ReactNode`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop truncate#	Description and type Truncates the text of all items to stick to a single line Type: `boolean`	Default value
Prop renderItem#	Description and type Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item. Type: `RenderItem<{}>`	Default value
Prop headingProps#	Description and type Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading` Type: `Partial<EuiSideNavHeadingProps>`	Default value
Prop toggleOpenOnMobile#	Description and type When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility. Type: `MouseEventHandler<HTMLButtonElement>`	Default value
Prop isOpenOnMobile#	Description and type If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop. Type: `boolean`	Default value
Prop mobileTitle#	Description and type A React node to render at mobile responsive widths, representing the title of this navigation menu. Type: `ReactNode`	Default value
Prop mobileBreakpoints#	Description and type Array of breakpoint names for when to show the mobile version. Set to `undefined` to remove responsive behavior Type: `string[]`	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<unknown>`	Default value