Element Plus UI: No open to new tab for menu item

Question

I have created a horizontal menu for Element Plus UI on Vue. When I right click on a menu item, I do not have the option to open it in a new tab.

But when on the element plus documentation. When I right click on a menu item I have that option:

How do I achieve that functionality since I can't find any references on that on the documentation?

Menu Code:

<template>
  <el-menu
    class="sideMenu"
    :collapse="isCollapse"
    active-text-color="#409EFF"
    :default-active="activeLink"
    text-color="#909399"
    background-color="#FFFFFF"
    :router="true"
  >
    <el-menu-item index="/menu1">
      <el-icon><DocumentChecked /></el-icon>
      <span>Menu 1</span>
    </el-menu-item>

    <el-menu-item index="/menu2">
      <el-icon><DocumentChecked /></el-icon>
      <span>Menu 2</span>
    </el-menu-item>
  </el-menu>
</template>

score 2 · Answer 1 · edited Aug 21 '22 at 04:24

According to Element Plus documentation el-menu-item has an attribute of route: which is type Obj. So, the el-menu-item class would be like:

<el-menu-item index="/menu1" route= VUE-ROUTER-OBJ>

Or You can use the menu attribute which activates routing from the index value of menu-items:

<!DOCTYPE html>
<el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router= true 
  >
<!-- router is the key attribute-->


<el-menu-item index="/" route="/"> Home </el-menu-item>

<el-menu-item index="PATH OF VUE ROUTER"> LINK NAME </el-menu-item>

score 0 · Answer 2 · answered Jul 12 '23 at 17:12

In my case, I had to use el-link inside the menu items to make it fully work with ctrl + click and also manually right click and select the "open in new tab" option:

<el-menu mode="horizontal" menu-trigger="click" ref="menuRef" >
    <el-menu-item>
      <el-link :underline="false" class="nav-brand" :href="/home">
        Home</el-link>
    </el-menu-item>
</el-menu>

Also there is a issue known when you use menu-trigger="click" mode. The submenus only are closed when user click on the submenu title, not when use click away outside the menu! To fix that, you can use import { onClickOutside } from '@vueuse/core' like this:

<template>
  <el-menu mode="horizontal" menu-trigger="click" ref="menuRef">
    <el-sub-menu :index="'customMenuIndex'">
      <template #title>
        <span>Title</span>
      </template>
      <el-menu-item>
        <el-link :underline="false" :href="'/subpage'">SubMenu</el-link>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { onClickOutside } from '@vueuse/core'

const menuRef = ref(null)

onClickOutside(menuRef, (event) => {
  menuRef.value.close('customMenuIndex')
})
</script>

score -1 · Answer 3 · answered Feb 23 '22 at 08:10

-1

You need to add anchor tag inside el-menu-item.

 <el-menu-item index="4">
     <a href="https://www.ele.me" target="_blank">
        <el-icon><DocumentChecked /></el-icon>
        <span>Menu 1</span>
    </a>
</el-menu-item>

<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Simple Link</a></el-menu-item>

answered Feb 23 '22 at 08:10

Swift

790
1
5
19

it turns the whole thing into a link. When I click it it will break vue routers functionality – Nate Feb 24 '22 at 07:17

Element Plus UI: No open to new tab for menu item

3 Answers3