### File

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

### Description

Sidebar navigation menu component that renders hierarchical menu items within the application sidebar. Integrates with EuiAppShellService to synchronize menu state and handle responsive behavior. Supports filtering, icons, tooltips, collapsible states, and automatic closure on mobile/tablet navigation. Automatically switches between sidebar-only and combined menu items based on viewport breakpoints.

Example :

    <!-- Basic sidebar menu within app structure -->
    <eui-app>
      <eui-app-sidebar>
        <eui-app-sidebar-body>
          <eui-app-sidebar-menu
            [items]="sidebarItems"
            [hasFilter]="true"
            [hasIcons]="true"
            (sidebarItemClick)="onMenuItemClick($event)"
            (sidebarItemToggle)="onMenuItemToggle($event)">
          </eui-app-sidebar-menu>
        </eui-app-sidebar-body>
      </eui-app-sidebar>
    </eui-app>

Example :

    import { EuiMenuItem } from '@eui/components/eui-menu';

    sidebarItems: EuiMenuItem[] = [
      {
        label: 'Dashboard',
        url: '/dashboard',
        icon: 'home:outline'
      },
      {
        label: 'Settings',
        icon: 'settings:outline',
        children: [
          { label: 'Profile', url: '/settings/profile' },
          { label: 'Security', url: '/settings/security' }
        ]
      }
    ];

    onMenuItemClick(item: EuiMenuItem): void {
      console.log('Menu item clicked:', item);
    }

### Accessibility

- Keyboard navigation supported (Arrow keys, Enter, Space)
- Focus management handled automatically
- ARIA attributes for menu structure and states
- Tooltips provide context in collapsed mode
- Filter input is keyboard accessible
- Collapsible items announce expanded/collapsed state

### Notes

- Must be used within eui-app-sidebar-body for proper layout
- items array should use EuiMenuItem interface
- hasFilter enables search/filter input above menu
- hasIcons displays icons alongside labels
- hasIconsLabels shows text below icons in collapsed mode
- hasTooltip enables tooltips in collapsed state (default: true)
- hasTooltipOnExpanded shows tooltips even when expanded
- expandAllItems expands all parent items by default
- isCollapsed renders icon-only mode (syncs with sidebar state)
- hasCollapsedInitials shows first letter instead of icon
- isFlat removes hierarchical indentation
- hasScrollToItem auto-scrolls to active item
- hasBoldRootLevel emphasizes top-level items
- Automatically closes sidebar on mobile/tablet after navigation
- Switches to combined menu items on mobile breakpoint
- sidebarItemClick emits on any item click
- sidebarItemToggle emits on expand/collapse actions

### Implements

`OnInit` `AfterViewInit` `OnChanges` `OnDestroy`

### Metadata

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

### Index

###### Properties
asService class Optional menu
###### Methods
Public onMenuItemClicked Public onSidebarItemToggled
###### Inputs
expandAllItems hasBoldRootLevel hasCollapsedInitials hasFilter hasIcons hasIconsLabels hasScrollToItem hasTooltip hasTooltipOnExpanded isCollapsed isFlat items
###### Outputs
sidebarItemClick sidebarItemToggle
###### HostBindings
class

### Constructor

`constructor()`

### Inputs

expandAllItems
Type : `boolean`
Default value : `false`
Expands all collapsible menu items by default. When true, all parent menu items with children are rendered in expanded state on initialization.

hasBoldRootLevel
Type : `boolean`
Default value : `false`
Applies bold font weight to root-level menu items. When true, emphasizes top-level menu items with bold styling to distinguish hierarchy.

hasCollapsedInitials
Type : `boolean`
Default value : `false`
Displays initials instead of full icons in collapsed mode. When true, shows first letter of menu item label as a visual identifier when sidebar is collapsed.

hasFilter
Type : `boolean`
Default value : `false`
Enables a search/filter input field above the menu items. When true, displays a text input allowing users to filter menu items by label.

hasIcons
Type : `boolean`
Default value : `false`
Displays icons alongside menu item labels. When true, renders icon elements for menu items that have icon definitions.

hasIconsLabels
Type : `boolean`
Default value : `false`
Shows icon labels in collapsed sidebar mode. When true, displays text labels below icons when sidebar is collapsed, enabling icon-with-label variant.

hasScrollToItem
Type : `boolean`
Default value : `false`
Enables automatic scrolling to active menu item. When true, scrolls the menu container to bring the currently active item into view.

hasTooltip
Type : `boolean`
Default value : `true`
Enables tooltips on menu items when sidebar is collapsed. When true, displays full menu item labels in tooltips on hover in collapsed state.

hasTooltipOnExpanded
Type : `boolean`
Default value : `false`
Shows tooltips even when sidebar is expanded. When true, displays tooltips on menu items regardless of sidebar collapse state.

isCollapsed
Type : `boolean`
Default value : `false`
Renders the menu in collapsed/icon-only mode. When true, hides menu item labels and shows only icons, typically synchronized with sidebar collapse state.

isFlat
Type : `boolean`
Default value : `false`
Renders menu in flat mode without hierarchical indentation. When true, all menu items are displayed at the same level regardless of parent-child relationships.

items
Type : `Items[]`
Array of menu item objects to render in the sidebar navigation. Each item should conform to EuiMenuItem interface with properties like label, url, icon, and children. Required for menu rendering.

### Outputs

sidebarItemClick
Type : `EventEmitter`
Emitted when a menu item is clicked by the user. Payload: EuiMenuItem - the clicked menu item object Triggered on any menu item click, before automatic sidebar closure on mobile/tablet.

sidebarItemToggle
Type : `EventEmitter`
Emitted when a collapsible menu item is expanded or collapsed. Payload: EuiMenuItem - the toggled menu item object Triggered when user clicks the expand/collapse control on parent menu items.

### HostBindings

class
Type : `string`
Default value : `'eui-app-sidebar-menu'`

### Methods

Public onMenuItemClicked
`onMenuItemClicked(event: EuiMenuItem)`
Parameters :
Name | Type | Optional
event | `EuiMenuItem` | No
Returns : `void`

Public onSidebarItemToggled
`onSidebarItemToggled(event: EuiMenuItem)`
Parameters :
Name | Type | Optional
event | `EuiMenuItem` | No
Returns : `void`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

class
Type : `string`
Default value : `'eui-app-sidebar-menu'`
Decorators : `@HostBinding()`

Optional menu
Type : `EuiMenuComponent`
Decorators : `@ViewChild('menu', {static: false})`

# results matching ""

# No results matching ""