eui documentation
  1. Components
  2. EuiHeaderUserProfileComponent

File

packages/components/layout/eui-header/header-user-profile/header-user-profile.component.ts

Description

User profile component designed for header placement, displaying user information with optional dropdown menu. Provides visual representation of the logged-in user with avatar, name, welcome message, and impersonation indicators. Integrates with EuiUserProfileComponent and EuiUserProfileMenuComponent for dropdown menu functionality. Supports customization of avatar display, user information visibility, and welcome message text.

Example :
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
      <eui-header-user-profile
        avatarUrl="assets/avatar.jpg"
        welcomeLabel="Welcome"
        [isShowUserInfos]="true">
        <eui-user-profile-menu>
          <eui-user-profile-menu-item (click)="onProfile()">
            My Profile
          </eui-user-profile-menu-item>
          <eui-user-profile-menu-item (click)="onSignOut()">
            Sign Out
          </eui-user-profile-menu-item>
        </eui-user-profile-menu>
      </eui-header-user-profile>
    </eui-header>
  </eui-app-header>
</eui-app>

Accessibility

  • Avatar provides visual user identification
  • Dropdown menu keyboard accessible when hasTabNavigation enabled
  • Welcome message readable by screen readers
  • Menu items must be keyboard navigable
  • Focus management for dropdown interactions
  • Impersonation status clearly indicated

Notes

  • Must be used within eui-header for proper layout
  • Positioned at the end of the header (rightmost)
  • Wraps EuiUserProfileComponent with header-specific styling
  • Menu content via eui-user-profile-menu child component
  • isShowUserInfos controls text visibility (default: true)
  • hasWelcomeLabel controls welcome message (default: true)
  • isShowAvatarInitials shows user initials when no avatar (default: false)
  • hasTabNavigation enables keyboard focus (default: false)
  • avatarUrl for custom avatar image
  • subInfos for additional user details (role, department)
  • impersonateLabel for impersonation scenarios
  • closeUserProfileDropdown() method to programmatically close menu
  • Automatically detects menu content via ContentChildren

Implements

AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-header-user-profile
imports EUI_USER_PROFILE
templateUrl ./header-user-profile.component.html
styleUrl ./header-user-profile.component.scss

Index

Properties
Methods
Inputs
HostBindings

Inputs

avatarUrl
Type : string

URL path to the user's avatar image. When provided, displays the image instead of initials or default avatar. Optional.
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.
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".
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.
subInfos
Type : string

Additional user information text displayed below the main user name. Typically used for role, department, or secondary identification. Optional.
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".

HostBindings

class
Type : string
Default value : 'eui-header-user-profile'

Methods

Public closeUserProfileDropdown
closeUserProfileDropdown()

Programmatically closes the user profile dropdown menu if currently open. Must be called after ngAfterViewInit lifecycle hook to ensure userProfile component is initialized. Useful for closing the menu in response to external events or navigation changes.

Returns : void

Properties

cssClass
Type : string
Default value : 'eui-header-user-profile'
Decorators :
@HostBinding('class')
hasMenuContent
Type : QueryList<EuiUserProfileMenuComponent>
Decorators :
@ContentChildren(undefined, {descendants: true})
userProfile
Type : EuiUserProfileComponent
Decorators :
@ViewChild('userProfile')

results matching ""

    No results matching ""