# EuiSidebarMenuComponent

**Type:** component



A sidebar menu component that wraps the EUI menu component.
This component provides a collapsible sidebar navigation menu with various display options.

### Basic usage
```typescript
menuItems: EuiMenuItem[] = [
  { label: 'Dashboard', icon: 'home', route: '/dashboard' },
  { label: 'Settings', icon: 'settings', route: '/settings' }
];
```
```html
<eui-sidebar-menu [items]="menuItems"></eui-sidebar-menu>
```

### Collapsed with icons
```html
<eui-sidebar-menu
  [items]="menuItems"
  [isCollapsed]="true"
  [hasIcons]="true"
  [hasCollapsedInitials]="true">
</eui-sidebar-menu>
```

### With search filter
```html
<eui-sidebar-menu
  [items]="menuItems"
  [hasFilter]="true"
  searchFilterLabel="Search menu"
  (itemClick)="onMenuItemClick($event)">
</eui-sidebar-menu>
```

### Accessibility
- Keyboard navigation with arrow keys and Enter
- Tooltips provide context in collapsed mode
- ARIA labels for screen reader support
- Focus management for nested menu items

### Notes
- Use `hasTooltipOnExpanded` to show tooltips even when menu is expanded
- `expandAllItems` opens all nested menu groups on initial render
- `hasBoldRootLevel` emphasizes top-level navigation items
- Filter searches through all menu item labels and nested items


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

## Inputs
- **expandAllItems**: `undefined` - Whether to initially expand all menu items
- **externalTarget**: `undefined` - Target for external links
- **filterValue**: `undefined` - Initial value for the filter input
- **fragmentId**: `undefined` - ID of the fragment to navigate to
- **hasBoldRootLevel**: `undefined` - Whether to make root level menu items bold
- **hasCollapsedInitials**: `undefined` - Whether to show initials in collapsed mode
- **hasFilter**: `undefined` - Whether to show a filter input for searching menu items
- **hasIcons**: `undefined` - Whether to show icons for menu items
- **hasTooltip**: `undefined` - Whether to show tooltips for menu items
- **hasTooltipOnExpanded**: `undefined` - Whether to show tooltips even when the menu is expanded
- **isCollapsed**: `undefined` - Whether the sidebar is collapsed
- **items**: `undefined` - The menu items to be displayed
- **searchFilterLabel**: `undefined` - Label for the search filter input
- **style**: `undefined` - Custom inline styles for the sidebar container

## Outputs
- **itemClick**: `EuiMenuItem` - Event emitted when a menu item is clicked
- **menuClick**: `boolean` - Event emitted when the menu itself is clicked