### File

`packages/components/eui-sidebar-menu/eui-sidebar-menu.component.ts`

### Description

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

### Basic usage

Example :

    menuItems: EuiMenuItem[] = [
      { label: 'Dashboard', icon: 'home', route: '/dashboard' },
      { label: 'Settings', icon: 'settings', route: '/settings' }
    ];

Example :

    <eui-sidebar-menu [items]="menuItems"></eui-sidebar-menu>

### Collapsed with icons

Example :

    <eui-sidebar-menu
      [items]="menuItems"
      [isCollapsed]="true"
      [hasIcons]="true"
      [hasCollapsedInitials]="true">
    </eui-sidebar-menu>

### With search filter

Example :

    <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

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-sidebar-menu`
imports | `EUI_MENU`
templateUrl | `./eui-sidebar-menu.component.html`
styleUrl | `./eui-sidebar-menu.scss`

### Index

###### Properties

- string

###### Inputs

- expandAllItems
- externalTarget
- filterValue
- fragmentId
- hasBoldRootLevel
- hasCollapsedInitials
- hasFilter
- hasIcons
- hasTooltip
- hasTooltipOnExpanded
- hasTooltipOnlyOnExpanded
- isCollapsed
- items
- searchFilterLabel
- style

###### Outputs

- itemClick
- menuClick

###### HostBindings

- class

### Inputs

expandAllItems
Default value : `false, { transform: booleanAttribute }`
Whether to initially expand all menu items

externalTarget
Target for external links

filterValue
Default value : `''`
Initial value for the filter input

fragmentId
ID of the fragment to navigate to

hasBoldRootLevel
Default value : `false, { transform: booleanAttribute }`
Whether to make root level menu items bold

hasCollapsedInitials
Default value : `false, { transform: booleanAttribute }`
Whether to show initials in collapsed mode

hasFilter
Default value : `false, { transform: booleanAttribute }`
Whether to show a filter input for searching menu items

hasIcons
Default value : `false, { transform: booleanAttribute }`
Whether to show icons for menu items

hasTooltip
Default value : `true, { transform: booleanAttribute }`
Whether to show tooltips for menu items

hasTooltipOnExpanded
Default value : `false, { transform: booleanAttribute }`
Whether to show tooltips even when the menu is expanded

hasTooltipOnlyOnExpanded
Default value : `false, { transform: booleanAttribute }`
Whether to show tooltips only from tooltip property instead of label and tabLabel when expanded

isCollapsed
Default value : `false, { transform: booleanAttribute }`
Whether the sidebar is collapsed

items
Default value : `[]`
The menu items to be displayed

searchFilterLabel
Label for the search filter input

style
Custom inline styles for the sidebar container

### Outputs

itemClick
Type : `EuiMenuItem`
Event emitted when a menu item is clicked

menuClick
Type : `boolean`
Event emitted when the menu itself is clicked

### HostBindings

class
Type : `string`
Default value : `'eui-sidebar-menu'`
CSS class binding for the host element

### Properties

string
Type : `string`
Default value : `'eui-sidebar-menu'`
Decorators : `@HostBinding('class')`
CSS class binding for the host element

# results matching ""

# No results matching ""