Adding context menu to the Avatar

Here, we talk about the Avatar and Context menu components.

In this article, we'll show how you can add context menu to the Avatar component in UI Bakery. This option might be useful when you want to allow users to access account-related information and actions when clicking on the user avatar.

Note that it is a workaround option - it's not natively supported in UI Bakery.

Let's see how you can do that:

1. Add the Avatar component to the working area.

2. Next, to hide the Context menu component inside the Avatar, set the Condition to false in the Show condition section of the component's settings.

1. Now, specify your menu items in the component's Menu items field, for example:

[
  { id: 'userName', title: {{user.email}}, icon: 'account_box_material' },
  { id: 'logout', title: 'Sign Out', icon: 'exit_to_app_material' },
]

1. Next, add the following CSS classes to the components in the Styling settings section: avatar-menu & avatar-context-menu.

1. Now, customize styles for these classes in the Custom code tab:

<style>
  .avatar-menu {
  	cursor: pointer;
  }

  .avatar-context-menu {
  	margin-top: -36px;
  }
</style>

1. Finally, create a JavaScript action and assign it to the Avatar's On Click trigger:

{{ui.avatarContextMenu.toggle()}}

Now, when users click on the avatar, the context menu will be displayed.