How to make button dropdown in ant design in react js?

Solution

To make button dropdown in ant design in react js, first install ant design library using npm install antd command import and then put the button component in the dropdown component. So it will display like button dropdown.

Snippet

In this snippet, see the short example to use button component of ant design library. with the use <Dropdown> component and menu={{items,}} to make a button dropdown.

<Dropdown
    menu={{
    items,
     }}
    placement="bottom"
    arrow
>
  <Button type="primary">bottom</Button>
</Dropdown>

Example

In this example, we will import the button and dropdown component from the ant library. It creates a dropdown menu with three items, clicking on the dropdown button will open menu items. The button component uses the type prop set to primary.

Let’s start coding…

App.js

import { Button, Dropdown } from 'antd';
const items = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://reactjssnippet.com/">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://reactjssnippet.com/">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://reactjssnippet.com/">
        3rd menu item
      </a>
    ),
  },
];
const App = () => (
  <>
   
    <Dropdown
      menu={{
        items,
      }}
      placement="bottom"
      arrow
    >
      <Button type="primary">bottom</Button>
    </Dropdown>
   
  </>
);
export default App;

Output

Links

Here, we are provided code sandbox links for the above program button dropdown in 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.