Solution

To make avatar with dropdown using ant design in react js, first install ant design library using npm install antd command and install ant design icon library using npm install --save @ant-design/icons command. Then make a dropdown component and add avatar component with in ant design.

Snippet

In this snippet, We are provided and example of using ant design dropdown component with avatar.

<Dropdown overlay={<WidgetMenu />}>
  <Avatar icon={<UserOutlined />} />
</Dropdown>

Example

In this example, we will import import { Avatar, Menu, Dropdown } from "antd"; then use this code <Dropdown overlay={<WidgetMenu />}> <Avatar icon={<UserOutlined />} /> </Dropdown> make avatar with dropdown using ant design in react js.

Let’s start coding…

App.js

import React from "react";
import { Avatar, Menu, Dropdown } from "antd";
import {
  UserOutlined,
  SolutionOutlined,
  LockOutlined,
  TranslationOutlined,
  PoweroffOutlined
} from "@ant-design/icons";

function WidgetMenu(props) {
  return (
    <Menu {...props}>
      <Menu.Item>
        <SolutionOutlined className="icon" />
        profile
      </Menu.Item>
      <Menu.Item>
        <LockOutlined className="icon" />
        change password
      </Menu.Item>
      <Menu.Item>
        <TranslationOutlined className="icon" />
        change language
      </Menu.Item>
      <Menu.Item>
        <PoweroffOutlined className="icon" />
        sign out
      </Menu.Item>
    </Menu>
  );
}

export default function App() {
  return (
    <>
      <Dropdown overlay={<WidgetMenu />}>
        <Avatar icon={<UserOutlined />} />
      </Dropdown>
    </>
  );
}

Output

target, child

Here, we are provided code sandbox links for the above program make avatar with dropdown using ant design. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.