Adding ability to make single Menu.Item not selectable within a Menu (for when nested Header)

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I have a situation where I am putting non-menu items into a Header with nested Menu/Items alongside regular navigation. Currently the items will highlight when clicked as-if they are the selected menu item.

I have tried the following.

1. Instead of using <Menu.Item>, use <li className="ant-menu-item"> This causes console errors.

<Header>
  <Menu theme="dark" mode="horizontal" className={styles.rightNav} selectable={false}>
     <Menu.Item key="accounts">
      <NavbarLink to="/accounts" icon="target" text="Accounts" />
    </Menu.Item>
    <li className="ant-menu-item">
      <SearchInput />
    </li>
  </Menu>
</Header>

Warning: React does not recognize the `inlineIndent` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `inlineindent` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in li (created by Menu)
    in ul (created by DOMWrap)
    in DOMWrap (created by Menu)
    in Menu (created by Menu)
    in Menu (created by Navbar)
    in div (created by Basic)
    in Basic (created by Adapter)
    in Adapter (created by Navbar)
    in Navbar (created by App)
    in div (created by BasicLayout)
    in BasicLayout (created by Adapter)
    in Adapter (created by App)
    in App (created by Routes)
    in Provider (created by Routes)
    in Routes
    in Router (created by BrowserRouter)
    in BrowserRouter
    in IntlProvider

1. <Menu.Items disabled={true}> - This works, but the downside here is the default styling of disabled menu items need to be overridden.

<Header>
  <Menu theme="dark" mode="horizontal" className={styles.rightNav}>
     <Menu.Item key="accounts">
      <NavbarLink to="/accounts" icon="target" text="Accounts" />
    </Menu.Item>
    <Menu.Item disabled={true}>
      <SearchInput />
    </Menu.Item>
  </Menu>
</Header>

1. Setting the Menu to selectable={false}. This works as desired for affects the other Menu.Items.

<Header>
  <Menu theme="dark" mode="horizontal" className={styles.rightNav} selectable={false}>
     <Menu.Item key="accounts">
      <NavbarLink to="/accounts" icon="target" text="Accounts" />
    </Menu.Item>
    <Menu.Item>
      <SearchInput />
    </Menu.Item>
  </Menu>
</Header>

What does the proposed API look like?

Possible solutions:

1. Add a selectable attribute to the Menu.Item - <Menu.Item selectable={false}>

<Header>
  <Menu theme="dark" mode="horizontal" className={styles.rightNav}>
     <Menu.Item key="accounts">
      <NavbarLink to="/accounts" icon="target" text="Accounts" />
    </Menu.Item>
    <Menu.Item  selectable={false}>
      <SearchInput />
    </Menu.Item>
  </Menu>
</Header>

[lzear]

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

[pinghsu520]

^ is there a solution