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.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.
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.
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. EuiSideNavItemType<{}>[] | Default value Required |
Prop children# | Description and type
never | Default value |
Prop className# | Description and type Class names to be merged into the final 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 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 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. RenderItem<{}> | Default value |
Prop headingProps# | Description and type Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the 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 MouseEventHandler<HTMLButtonElement> | Default value |
Prop isOpenOnMobile# | Description and type If boolean | Default value |
Prop mobileTitle# | Description and type A React node to render at mobile responsive widths, representing the title of this navigation menu. ReactNode | Default value |
Prop mobileBreakpoints# | Description and type Array of breakpoint names for when to show the mobile version. string[] | Default value |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<unknown> | Default value |