eui documentation
  1. Components
  2. EuiSidebarMenuComponent

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

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