> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-header-avatar-action-collection.md).

# New Header Avatar Action Collection

## Overview

The New Header Avatar Action Collection enhances your screen flow headers by adding a customizable user avatar with dropdown functionality. This action creates a personalized and interactive element that allows users to access profile information or quickly perform relevant actions.

## How it Helps

* **Personalized User Experience:** Create a welcoming and user-centric interface by displaying a user's avatar or initials.
* **Quick Access to Actions:** Provide convenient access to common user actions or profile settings via a dropdown menu.
* **Clean Interface:** Consolidate user-specific actions in a compact dropdown, keeping the header uncluttered.
* **Visual Appeal:** Add a touch of personalization and visual interest to your flow's header.

## How It Works

1. **Drag and Drop:** From the Avonni Actions section of Flow Builder, locate the New Header Avatar Action Collection and drag it onto the desired screen element.
2. **Configure Avatar:**
   * **Label:** Set the text you want displayed next to or below the avatar (e.g., the user's name).
   * **Icon Name:** (Optional) Choose an icon to represent the avatar if a user image isn't available. The icon will often be the user's initials.
3. **Configure Dropdown Actions:**
   * **Action Type:** For each action in the dropdown, choose the desired behavior (e.g., navigate to a profile page, trigger a logout flow, open user settings).
   * **Action Logic:** Define the specific details of each action (e.g., which screen to navigate to, which flow to activate).

## Settings and Options

* **Label:** Customize the text accompanying the avatar.
* **Icon Name:** Select an icon for situations where a user image isn't available or preferred.

## When to Use It

* **User Profile:** Provide direct access to a user's profile page.
* **Account Settings:** Link to settings where users can manage preferences or security.
* **Logout:** Offer a quick and easy way for users to log out of the flow or application.
* **Notifications:** Display a notification badge on the avatar icon if the user has unread notifications.
* **Help/Support:** Provide a link to help resources or a contact form.

## Key Considerations

* **Respect User Privacy:** If using user images, ensure you have appropriate permissions and handle data sensitively.
* **Prioritize Relevant Actions:** Limit the number of dropdown actions to those most frequently used or essential.
* **Use Clear Labels:** Make sure dropdown action labels are descriptive and easy to understand.
* Consider adding a tooltip to the avatar icon that displays the user's full name or email address.
* Explore options for customizing the appearance of the avatar and dropdown (e.g., colors, styles).

## Integration with Avonni Components

The New Header Avatar Action Collection seamlessly integrates with other Avonni components. You could pair it with the Avonni Notification component to display a notification badge on the avatar when new notifications are available.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/actions/ui-and-navigation/new-header-avatar-action-collection.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.