# EuiHeaderUserProfileComponent

**Type:** component

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-app&gt;
  &lt;eui-app-header&gt;
    &lt;eui-header&gt;
      &lt;eui-header-logo&gt;&lt;/eui-header-logo&gt;
      &lt;eui-header-app appName=&quot;MyWorkplace&quot;&gt;&lt;/eui-header-app&gt;
      &lt;eui-header-user-profile
        avatarUrl=&quot;assets/avatar.jpg&quot;
        welcomeLabel=&quot;Welcome&quot;
        [isShowUserInfos]=&quot;true&quot;&gt;
        &lt;eui-user-profile-menu&gt;
          &lt;eui-user-profile-menu-item (click)=&quot;onProfile()&quot;&gt;
            My Profile
          &lt;/eui-user-profile-menu-item&gt;
          &lt;eui-user-profile-menu-item (click)=&quot;onSignOut()&quot;&gt;
            Sign Out
          &lt;/eui-user-profile-menu-item&gt;
        &lt;/eui-user-profile-menu&gt;
      &lt;/eui-header-user-profile&gt;
    &lt;/eui-header&gt;
  &lt;/eui-app-header&gt;
&lt;/eui-app&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Avatar provides visual user identification</li>
<li>Dropdown menu keyboard accessible when hasTabNavigation enabled</li>
<li>Welcome message readable by screen readers</li>
<li>Menu items must be keyboard navigable</li>
<li>Focus management for dropdown interactions</li>
<li>Impersonation status clearly indicated</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-header for proper layout</li>
<li>Positioned at the end of the header (rightmost)</li>
<li>Wraps EuiUserProfileComponent with header-specific styling</li>
<li>Menu content via eui-user-profile-menu child component</li>
<li>isShowUserInfos controls text visibility (default: true)</li>
<li>hasWelcomeLabel controls welcome message (default: true)</li>
<li>isShowAvatarInitials shows user initials when no avatar (default: false)</li>
<li>hasTabNavigation enables keyboard focus (default: false)</li>
<li>avatarUrl for custom avatar image</li>
<li>subInfos for additional user details (role, department)</li>
<li>impersonateLabel for impersonation scenarios</li>
<li>closeUserProfileDropdown() method to programmatically close menu</li>
<li>Automatically detects menu content via ContentChildren</li>
</ul>


**Selector:** `eui-header-user-profile`

**Standalone:** false

## Inputs

- **avatarUrl**: `string` - <p>URL path to the user&#39;s avatar image.
When provided, displays the image instead of initials or default avatar.
Optional.</p>

- **hasTabNavigation**: `boolean` - <p>Enables keyboard tab navigation to the user profile component.
When true, makes the profile element focusable and accessible via keyboard.</p>

- **hasWelcomeLabel**: `boolean` - <p>Controls visibility of the welcome label text.
When false, hides the welcome message prefix and shows only the username.</p>

- **impersonateLabel**: `string` - <p>Text label displayed when user is impersonating another user.
Shows between the actual user and impersonated user names, typically &quot;acting as&quot;.</p>

- **isShowAvatarInitials**: `boolean` - <p>Displays user initials in the avatar when no avatar image is provided.
When true, shows first letters of user&#39;s name as avatar placeholder.</p>

- **isShowUserInfos**: `boolean` - <p>Controls visibility of user information text (name, email, etc.).
When false, hides textual user details and shows only the avatar.</p>

- **subInfos**: `string` - <p>Additional user information text displayed below the main user name.
Typically used for role, department, or secondary identification.
Optional.</p>

- **welcomeLabel**: `string` - <p>Text label displayed before the username in the welcome message.
Typically used for greeting text like &quot;Welcome&quot; or &quot;Hello&quot;.</p>

