File
Description
Individual menu item component for user profile menus. Implements FocusableOption
for keyboard navigation support. Used within eui-user-profile-menu to create
actionable menu entries.
Basic Usage
Example :<eui-user-profile-menu>
<eui-user-profile-menu-item (click)="viewProfile()">
<eui-icon-svg icon="eui-user" size="s" />
My Profile
</eui-user-profile-menu-item>
<eui-user-profile-menu-item (click)="changePassword()">
<eui-icon-svg icon="eui-lock" size="s" />
Change Password
</eui-user-profile-menu-item>
<eui-user-profile-menu-item (click)="logout()">
<eui-icon-svg icon="eui-logout" size="s" />
Logout
</eui-user-profile-menu-item>
</eui-user-profile-menu>
Accessibility
- Implements ARIA menuitem role
- Keyboard focusable with proper tabindex management
- Supports focus() method for programmatic focus
- Works with parent menu's keyboard navigation
Notes
- Must be used within eui-user-profile-menu
- Supports any content (text, icons, badges)
- Click events handled through standard Angular event binding
- Focus managed by parent menu's FocusKeyManager
Implements
Index
Properties
|
|
|
Methods
|
|
|
HostBindings
|
|
|
HostBindings
|
attr.role
|
Type : string
|
Default value : 'menuitem'
|
|
attr.tabindex
|
Type : string
|
Default value : '-1'
|
|
class
|
Type : string
|
Default value : 'eui-user-profile-menu-item'
|
|
class
|
Type : string
|
Default value : 'eui-user-profile-menu-item'
|
Decorators :
@HostBinding('class')
|
|
role
|
Type : string
|
Default value : 'menuitem'
|
Decorators :
@HostBinding('attr.role')
|
|
tabindex
|
Type : string
|
Default value : '-1'
|
Decorators :
@HostBinding('attr.tabindex')
|