CODEWITHSUNDEEP
reactjsantd
user6267363
user6267363

Reputation: 13

How can I make a dropdown menu from just an icon with ant design?

I'm trying to make a user icon with a dropdown menu using ant design libraries and reactjs. If I use Dropdown.Button, I'm getting a box around the icon. I think this is related to a CSS border-box property, but I can't seem to get rid of it. If I use the Dropdown component, then I can't add an icon and can use only text. What's the right way to achieve this result?

import { Menu, Dropdown } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const Dummy = () => {
  const userMenu = (
    <Menu>
      <Menu.Item key="1">Item 1</Menu.Item>
      <Menu.Item key="2">Item 2</Menu.Item>
      <Menu.Item key="3">Item 3</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3">Logout</Menu.Item>
    </Menu>
  );
  return (
    <div>
      <Dropdown.Button
        style={{ float: 'right' }}
        overlay={userMenu}
        icon={
          <UserOutlined
            style={{
              fontSize: '28px',
              backgroundColor: '#f0f0f0',
              borderRadius: '50%',
            }}
          />
        }
      ></Dropdown.Button>
    </div>
  );
};

export default Dummy;

Upvotes: 1

Views: 15508

Answers (1)

Cesar N Mejia Leiva
Cesar N Mejia Leiva

Reputation: 1721

You can achieve the desired styling via CSS.

Add a className=dropdown-btn to the Dropdown.Button component

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Menu, Dropdown } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const Dummy = () => {
  const userMenu = (
    <Menu>
      <Menu.Item key="1">Item 1</Menu.Item>
      <Menu.Item key="2">Item 2</Menu.Item>
      <Menu.Item key="3">Item 3</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3">Logout</Menu.Item>
    </Menu>
  );
  return (
    <div>
      <Dropdown.Button
        style={{ float: 'right' }}
        className="dropdown-btn"
        overlay={userMenu}
        icon={
          <UserOutlined
            style={{
              fontSize: '28px',
              backgroundColor: '#f0f0f0',
              borderRadius: '50%',
            }}
          />
        }
      ></Dropdown.Button>
    </div>
  );
};

export default Dummy;

ReactDOM.render(
  <Dummy/>,
  document.getElementById('container'),
);

Add CSS to target the offending border and background-color:

.dropdown-btn > .ant-dropdown-trigger  {
  border: none;
}

.dropdown-btn > .ant-dropdown-trigger > span {
  background-color: white !important;
}

If the use of !important is a problem, you can add more selectors to increase the specificity.

Working StackBlitz link: https://ant-design-dropdown-link-button.stackblitz.io

P.S. Another quick and dirty solution is to add the type="link" attribute to the Dropdown.Button. This will get rid of the border styling, but the background color will remain and the icon will turn blue.

Upvotes: 2

Related Questions