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

user_7695783 0
Viewed 701

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.

No open to a new tab option

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

Right Click menu 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>
element-plus vuejs3
2 Answers

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>
user_31981510

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>
user_124892790
Related