Make an unclickable Menu Item

user_9658326 0
Viewed 4066

I'm doing a Dropdown menu using Ant Design:

import React, { Component } from "react";
import { Icon, Dropdown, Menu } from "antd";
const { Item } = Menu;

class NotificationBell extends Component {
    render() {
        const menu = (
            <Menu>
                <Item><p>You must be connected to get notifications.</p></Item>
            </Menu>
        );
        return (
            <Dropdown overlay={menu} trigger={['click']}>
                <Icon type="bell" theme="outlined" />
            </Dropdown>
        );
    }
}

Ant this is what I get:

Ant Design Dropdown

But I don't want to just remove the highlight, I also want to make the component unclickable, i.e. instead of a "hand cursor" I want a "normal cursor".

Adding the selectable={false} prop on the Menu component as suggested by the Ant Design documentation doesn't help. What should I do?

Thank you for your help.

antd reactjs drop-down-menu css
2 Answers

The documentation you linked to specifies a disabled prop on Menu.Item which may or may do what you want. If you want to do something other than what the library provides, you can customize the behavior.

You can use the CSS property cursor to specify which cursor you want on hover.

You might want to use not-allowed for a disabled-style cursor, or the default arrow: default.

Docs

For future reference, you can't prevent a user from clicking on the element. What you want to do is actually to communicate the affordance (or lack thereof) using visual cues, and potentially alter the behavior of your application when receiving that input.

user_2031300

The CSS property pointer-events set to none makes the component ignore mouse events without altering the style of the cursor.

<Menu>
  <Menu.Item key="/">
    <Link href="/">Clickable</Link>
  </Menu.Item>
  <Menu.Item style={{ pointerEvents: 'none' }}>
    Unclickable
  </Menu.Item>
</Menu>here
user_48238610
Related