Right click on Collapsed Menu Item of Ant Design do not show "Open in new tab"

Question

I have a React App that use Ant Design. It uses the Ant Design Menu component, in collapsed mode.

The thing is when I try to right click on a menu item, it do not show the options to "Open in new tab/window".

I suspect that it has relation with this question, because when I use the code inspector, the collapsed menu item of Ant Design don't use a tags directly.

How can I achieve that the "Open in new tab/window" options of right click appears when I click on collapsed menu items of Ant Design???

EDIT

The code I have is pretty like this:

<Menu.Item
    key="menu_1"
    onClick={() => {
        window.location.href = '../path/to/route';
    }}
>
    Dashboard
</Menu.Item>

But my application has more than 30 menu items, so putting an a tag on each item is a solution that require many text. I want to apply a dynamic solution in execution time for this issue.

No, Ant Design has this behavior because the structure of its item menu in collapse mode. It do not trigger a console error/warning. I thing the solution should be tricky code, not a fix of error/warning. — Yulio Aleman Jimenez, Jan 18 '19 at 22:49

score 2 · Accepted Answer · answered Jan 21 '19 at 12:41

2

You can always add anchor tag wherever you want. Like in Collapsed inline menu, you can use as follows:

<Menu.Item key="3">
    <Icon type="inbox" />
    <span>
        <a href="#">Option 3</a>
    </span>
</Menu.Item>

I have created a working demo, please check.

answered Jan 21 '19 at 12:41

Triyugi Narayan Mani

3,039
8
36
56

This was the solution that I applied to the code, but I was looking for a dynamic solution. Please, look update of the question. – Yulio Aleman Jimenez Jan 21 '19 at 18:43
@YulioAlemanJimenez OK. Then, there should be some other solution. – Triyugi Narayan Mani Jan 22 '19 at 07:13

Right click on Collapsed Menu Item of Ant Design do not show "Open in new tab"

1 Answers1