CODEWITHSUNDEEP
cssreactjsdrop-down-menuantd
JacopoStanchi
JacopoStanchi

Reputation: 2146

Make an unclickable Menu Item

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.

Upvotes: 10

Views: 9142

Answers (2)

Elz&#233;ar
Elz&#233;ar

Reputation: 191

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

Upvotes: 8

coreyward
coreyward

Reputation: 80090

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.

Upvotes: 7

Related Questions