# EuiSidebarMenuComponent

**Type:** component

<p>A sidebar menu component that wraps the EUI menu component.
This component provides a collapsible sidebar navigation menu with various display options.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">menuItems: EuiMenuItem[] = [
  { label: &#39;Dashboard&#39;, icon: &#39;home&#39;, route: &#39;/dashboard&#39; },
  { label: &#39;Settings&#39;, icon: &#39;settings&#39;, route: &#39;/settings&#39; }
];</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-sidebar-menu [items]=&quot;menuItems&quot;&gt;&lt;/eui-sidebar-menu&gt;</code></pre></div><h3>Collapsed with icons</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-sidebar-menu
  [items]=&quot;menuItems&quot;
  [isCollapsed]=&quot;true&quot;
  [hasIcons]=&quot;true&quot;
  [hasCollapsedInitials]=&quot;true&quot;&gt;
&lt;/eui-sidebar-menu&gt;</code></pre></div><h3>With search filter</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-sidebar-menu
  [items]=&quot;menuItems&quot;
  [hasFilter]=&quot;true&quot;
  searchFilterLabel=&quot;Search menu&quot;
  (itemClick)=&quot;onMenuItemClick($event)&quot;&gt;
&lt;/eui-sidebar-menu&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Keyboard navigation with arrow keys and Enter</li>
<li>Tooltips provide context in collapsed mode</li>
<li>ARIA labels for screen reader support</li>
<li>Focus management for nested menu items</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>hasTooltipOnExpanded</code> to show tooltips even when menu is expanded</li>
<li><code>expandAllItems</code> opens all nested menu groups on initial render</li>
<li><code>hasBoldRootLevel</code> emphasizes top-level navigation items</li>
<li>Filter searches through all menu item labels and nested items</li>
</ul>


**Selector:** `eui-sidebar-menu`

**Standalone:** false

## Inputs

- **expandAllItems**: `undefined` - <p>Whether to initially expand all menu items</p>

- **externalTarget**: `undefined` - <p>Target for external links</p>

- **filterValue**: `undefined` - <p>Initial value for the filter input</p>

- **fragmentId**: `undefined` - <p>ID of the fragment to navigate to</p>

- **hasBoldRootLevel**: `undefined` - <p>Whether to make root level menu items bold</p>

- **hasCollapsedInitials**: `undefined` - <p>Whether to show initials in collapsed mode</p>

- **hasFilter**: `undefined` - <p>Whether to show a filter input for searching menu items</p>

- **hasIcons**: `undefined` - <p>Whether to show icons for menu items</p>

- **hasTooltip**: `undefined` - <p>Whether to show tooltips for menu items</p>

- **hasTooltipOnExpanded**: `undefined` - <p>Whether to show tooltips even when the menu is expanded</p>

- **isCollapsed**: `undefined` - <p>Whether the sidebar is collapsed</p>

- **items**: `undefined` - <p>The menu items to be displayed</p>

- **searchFilterLabel**: `undefined` - <p>Label for the search filter input</p>

- **style**: `undefined` - <p>Custom inline styles for the sidebar container</p>


## Outputs

- **itemClick**: `EuiMenuItem` - <p>Event emitted when a menu item is clicked</p>

- **menuClick**: `boolean` - <p>Event emitted when the menu itself is clicked</p>

