# EuiAppSidebarMenuComponent

**Type:** component



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.

```html
<!-- 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>
```

```ts
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


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

## Inputs
- **expandAllItems**: `boolean` - Expands all collapsible menu items by default. When true, all parent menu items with children are rendered in expanded state on initialization.
- **hasBoldRootLevel**: `boolean` - Applies bold font weight to root-level menu items. When true, emphasizes top-level menu items with bold styling to distinguish hierarchy.
- **hasCollapsedInitials**: `boolean` - 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**: `boolean` - 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**: `boolean` - Displays icons alongside menu item labels. When true, renders icon elements for menu items that have icon definitions.
- **hasIconsLabels**: `boolean` - Shows icon labels in collapsed sidebar mode. When true, displays text labels below icons when sidebar is collapsed, enabling icon-with-label variant.
- **hasScrollToItem**: `boolean` - Enables automatic scrolling to active menu item. When true, scrolls the menu container to bring the currently active item into view.
- **hasTooltip**: `boolean` - Enables tooltips on menu items when sidebar is collapsed. When true, displays full menu item labels in tooltips on hover in collapsed state.
- **hasTooltipOnExpanded**: `boolean` - Shows tooltips even when sidebar is expanded. When true, displays tooltips on menu items regardless of sidebar collapse state.
- **isCollapsed**: `boolean` - 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**: `boolean` - 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**: `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**: `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**: `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.