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