File
Description
User profile component displayed in the sidebar header showing user information and avatar.
Provides visual representation of the logged-in user with optional welcome message, online status, and profile menu integration.
Supports impersonation indicators, avatar customization, and optional drawer toggle for expanded profile details.
Integrates with EuiUserProfileMenuComponent for dropdown menu functionality.
Example :<!-- Basic user profile in sidebar header -->
<eui-app>
<eui-app-sidebar>
<eui-app-sidebar-header>
<eui-app-sidebar-header-user-profile
welcomeLabel="Welcome"
[avatarUrl]="userAvatar"
[isOnline]="true">
</eui-app-sidebar-header-user-profile>
</eui-app-sidebar-header>
</eui-app-sidebar>
</eui-app>
<!-- With profile drawer -->
<eui-app>
<eui-app-sidebar>
<eui-app-sidebar-header>
<eui-app-sidebar-header-user-profile
[hasProfileDrawer]="true"
(toggle)="onSidebarProfileToggle($event)">
</eui-app-sidebar-header-user-profile>
</eui-app-sidebar-header>
<eui-app-sidebar-drawer [isExpanded]="false">
<p>User profile details</p>
</eui-app-sidebar-drawer>
</eui-app-sidebar>
</eui-app>
userAvatar = 'assets/user-avatar.jpg';
onSidebarProfileToggle(event: any): void {
console.log('Profile drawer toggled');
}
Accessibility
- Avatar provides visual user identification
- hasTabNavigation enables keyboard focus and navigation
- Online status indicator is visually distinct
- Welcome label provides context for screen readers
- Click interaction is keyboard accessible when hasToggle enabled
- Profile menu integration supports keyboard navigation
Notes
- Must be used within eui-app-sidebar-header for proper layout
- welcomeLabel displays greeting text (default: 'Welcome')
- impersonateLabel shows when user is impersonating (default: 'acting as')
- avatarUrl displays custom avatar image
- isShowUserInfos controls visibility of user text details (default: true)
- isShowAvatarInitials shows initials when no avatar image (default: false)
- isOnline displays online status indicator (default: true)
- hasWelcomeLabel controls welcome message visibility (default: true)
- hasTabNavigation enables keyboard focus (default: false)
- hasToggle enables click toggle functionality (default: false)
- hasProfileDrawer enables drawer mode with expandable content (default: false)
- toggle event emits when profile is clicked with hasToggle or hasProfileDrawer enabled
- Integrates with eui-app-sidebar-drawer for expanded profile details
- Can contain eui-user-profile-menu for dropdown menu functionality
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
HostBindings
|
|
|
HostListeners
|
|
|
Accessors
|
|
|
|
avatarUrl
|
Type : string
|
URL path to the user's avatar image.
When provided, displays the image instead of initials or default avatar.
Optional.
|
|
hasProfileDrawer
|
Type : boolean
|
Default value : false
|
Enables profile drawer mode with expandable content panel.
When true, clicking the profile opens a drawer with additional user details and actions.
|
|
hasTabNavigation
|
Type : boolean
|
Default value : false
|
Enables keyboard tab navigation to the user profile component.
When true, makes the profile element focusable and accessible via keyboard.
|
|
hasToggle
|
Type : boolean
|
Default value : false
|
Enables toggle functionality for expanding/collapsing profile details.
When true, allows clicking to toggle profile state and emits toggle events.
|
|
hasWelcomeLabel
|
Type : boolean
|
Default value : true
|
Controls visibility of the welcome label text.
When false, hides the welcome message prefix and shows only the username.
|
|
impersonateLabel
|
Type : string
|
Default value : 'acting as'
|
Text label displayed when user is impersonating another user.
Shows between the actual user and impersonated user names, typically "acting as".
|
|
isOnline
|
Type : boolean
|
Default value : true
|
Indicates the user's online status with a visual indicator.
When true, displays an online status badge on the avatar.
|
|
isShowAvatarInitials
|
Type : boolean
|
Default value : false
|
Displays user initials in the avatar when no avatar image is provided.
When true, shows first letters of user's name as avatar placeholder.
|
|
isShowUserInfos
|
Type : boolean
|
Default value : true
|
Controls visibility of user information text (name, email, etc.).
When false, hides textual user details and shows only the avatar.
|
|
welcomeLabel
|
Type : string
|
Default value : 'Welcome'
|
Text label displayed before the username in the welcome message.
Typically used for greeting text like "Welcome" or "Hello".
|
Outputs
|
toggle
|
Type : EventEmitter<any>
|
Emitted when the user profile is clicked and toggle functionality is enabled.
Payload: any - event data from the click interaction
Triggered when hasToggle or hasProfileDrawer is true and the profile is clicked.
|
HostListeners
|
click
|
Arguments : '$event'
|
click(event: MouseEvent)
|
Methods
|
onClick
|
onClick(event: MouseEvent)
|
Decorators :
@HostListener('click', ['$event'])
|
Parameters :
| Name |
Type |
Optional |
| event |
MouseEvent
|
No
|
|
|
onProfileClick
|
onProfileClick(event: any)
|
Parameters :
| Name |
Type |
Optional |
| event |
any
|
No
|
|
|
Public
toggleProfile
|
Type : unknown
|
Default value : false
|
Accessors
|
cssClasses
|
getcssClasses()
|