eui documentation
  1. Components
  2. EuiUserProfileMenuComponent

File

packages/components/eui-user-profile/user-profile-menu/user-profile-menu.component.ts

Description

Container component for user profile menu items. Provides keyboard navigation and focus management for menu items within a user profile dropdown. Uses CDK FocusKeyManager for accessible keyboard interaction.

Basic Usage

Example :
<eui-user-profile [hasMenu]="true">
  <eui-user-profile-menu>
    <eui-user-profile-menu-item (click)="viewProfile()">
      My Profile
    </eui-user-profile-menu-item>
    <eui-user-profile-menu-item (click)="settings()">
      Settings
    </eui-user-profile-menu-item>
    <eui-user-profile-menu-item (click)="logout()">
      Logout
    </eui-user-profile-menu-item>
  </eui-user-profile-menu>
</eui-user-profile>

Accessibility

  • Implements ARIA menu role for proper semantics
  • Keyboard navigation with arrow keys (up/down)
  • Focus wraps from last to first item
  • Automatically focuses first item when menu opens
  • Integrates with CDK FocusKeyManager for standard behavior

Notes

  • Must be used within eui-user-profile component
  • Automatically manages focus state of child menu items
  • Keyboard navigation activates on dropdown open
  • Use eui-user-profile-menu-item for menu entries

Implements

OnDestroy AfterViewInit

Metadata

encapsulation ViewEncapsulation.None
selector eui-user-profile-menu
template 
<ng-content/>

Index

Properties
Methods
HostBindings
HostListeners

HostBindings

attr.role
Type : string
Default value : 'menu'
class
Type : string
Default value : 'eui-user-profile-menu'

HostListeners

keydown
Arguments : '$event'
keydown(event: unknown)

Methods

onKeydown
onKeydown(event: unknown)
Decorators :
@HostListener('keydown', ['$event'])
Parameters :
Name Type Optional
event unknown No
Returns : void
subscribeToParent
subscribeToParent()
Returns : void

Properties

class
Type : string
Default value : 'eui-user-profile-menu'
Decorators :
@HostBinding()
items
Type : QueryList<EuiUserProfileMenuItemComponent>
Decorators :
@ContentChildren(undefined)
Public parent
Type : EuiUserProfileComponent
Default value : inject(forwardRef(() => EuiUserProfileComponent), { optional: true })
role
Type : string
Default value : 'menu'
Decorators :
@HostBinding('attr.role')

results matching ""

    No results matching ""