eui documentation
  1. Components
  2. EuiAppSidebarMenuComponent

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
Methods
Inputs
Outputs
HostBindings

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 ""