Menu

Menu that provides navigation for your website.

TIP

If you want to override the default height of el-menu, you can use the following CSS:

css

.el-menu--horizontal {
  --el-menu-horizontal-height: 100px;
}

Top bar

Top bar Menu can be used in a variety of scenarios.

By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the sub-menu component to create a second level menu. Menu provides background-color, text-color and active-text-color to customize the colors.

vue

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
  <div class="h-6" />
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

Left And Right

You can make the menu items to the left or right.

Vertical Menu with sub-menus.

You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.

Default colors

Custom colors

vue

<template>
  <el-row class="tac">
    <el-col :span="12">
      <h5 class="mb-2">Default colors</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="12">
      <h5 class="mb-2">Custom colors</h5>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

Collapse

Vertical Menu could be collapsed.

expandcollapse

Popper Offset 2.4.4

Menu with popperOffset will override Submenu's popper-offset.

Name	Description	Type	Default
mode	menu display mode	`enum`	vertical
collapse	whether the menu is collapsed (available only in vertical mode)	`boolean`	false
ellipsis	whether the menu is ellipsis (available only in horizontal mode)	`boolean`	true
ellipsis-icon 2.4.4	custom ellipsis icon (available only in horizontal mode and ellipsis is true)	`string` / `Component`	—
popper-offset 2.4.4	offset of the popper (effective for all submenus)	`number`	6
default-active	index of active menu on page load	`string`	''
default-openeds	array that contains indexes of currently active sub-menus	`object`	[]
unique-opened	whether only one sub-menu can be active	`boolean`	false
menu-trigger	how sub-menus are triggered, only works when `mode` is 'horizontal'	`enum`	hover
router	whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load.	`boolean`	false
collapse-transition	whether to enable the collapse transition	`boolean`	true
popper-effect 2.2.26	Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed	`enum` / `string`	dark
close-on-click-outside 2.4.4	optional, whether menu is collapsed when clicking outside	`boolean`	false
popper-class 2.5.0	custom class name for all popup menus	`string`	—
show-timeout 2.5.0	control timeout for all menus before showing	`number`	300
hide-timeout 2.5.0	control timeout for all menus before hiding	`number`	300
background-color deprecated	background color of Menu (hex format) (use `--el-menu-bg-color` in a style class instead)	`string`	#ffffff
text-color deprecated	text color of Menu (hex format) ( use `--el-menu-text-color` in a style class instead)	`string`	#303133
active-text-color deprecated	text color of currently active menu item (hex format) ( use `--el-menu-active-color` in a style class instead)	`string`	#409eff

Name	Description	Type
select	callback function when menu is activated	`Function`
open	callback function when sub-menu expands	`Function`
close	callback function when sub-menu collapses	`Function`

Name	Description	Subtags
default	customize default content	SubMenu / Menu-Item / Menu-Item-Group

Name	Description	Type
open	open a specific sub-menu, the param is index of the sub-menu to open	`Function`
close	close a specific sub-menu, the param is index of the sub-menu to close	`Function`

SubMenu API

SubMenu Attributes

Name	Description	Type	Default
index required	unique identification	`string`	—
popper-class	custom class name for the popup menu	`string`	—
show-timeout	timeout before showing a sub-menu(inherit `show-timeout` of the menu by default.)	`number`	—
hide-timeout	timeout before hiding a sub-menu(inherit `hide-timeout` of the menu by default.)	`number`	—
disabled	whether the sub-menu is disabled	`boolean`	false
teleported	whether popup menu is teleported to the body, the default is true for the level one SubMenu, false for other SubMenus	`boolean`	undefined
popper-offset	offset of the popper (overrides the `popper` of menu)	`number`	—
expand-close-icon	Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect	`string` / `Component`	—
expand-open-icon	Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect	`string` / `Component`	—
collapse-close-icon	Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect	`string` / `Component`	—
collapse-open-icon	Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect	`string` / `Component`	—

SubMenu Slots

Name	Description	Subtags
default	customize default content	SubMenu / Menu-Item / Menu-Item-Group
title	customize title content	—

Name	Description	Type	Default
index	unique identification	`string` / `null`	null
route	Vue Router object	`object`	—
disabled	whether disabled	`boolean`	false

Name	Description	Type
click	callback function when menu-item is clicked, the param is menu-item instance	`Function`

Name	Description
default	customize default content
title	customize title content

Name	Description	Type	Default
title	group title	`string`	—

Name	Description	Subtags
default	customize default content	Menu-Item
title	customize group title	—

Type Declarations

Show declarations

/**
 * @param index index of activated menu
 * @param indexPath index path of activated menu
 * @param item the selected menu item
 * @param routerResult result returned by `vue-router` if `router` is enabled
 */
type MenuSelectEvent = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked,
  routerResult?: Promise<void | NavigationFailure>
) => void

/**
 * @param index index of expanded sub-menu
 * @param indexPath index path of expanded sub-menu
 */
type MenuOpenEvent = (index: string, indexPath: string[]) => void

/**
 * @param index index of collapsed sub-menu
 * @param indexPath index path of collapsed sub-menu
 */
type MenuCloseEvent = (index: string, indexPath: string[]) => void

interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}

interface MenuItemClicked {
  index: string
  indexPath: string[]
  route?: RouteLocationRaw
}

Source

Component • Style • Docs

Contributors

Dropdown

Page Header

Top bar

Left And Right

Side bar

Default colors

Custom colors

Collapse

Popper Offset 2.4.4

Menu API

Menu Attributes

Menu Events

Menu Slots

Menu Exposes

SubMenu API

SubMenu Attributes

SubMenu Slots

Menu-Item API

Menu-Item Attributes

Menu-Item Events

Menu-Item Slots

Menu-Item-Group API

Menu-Item-Group Attributes

Menu-Item-Group Slots

Type Declarations

Source

Contributors

Menu ​

Top bar ​

Left And Right ​

Side bar ​

Default colors

Custom colors

Collapse ​

Popper Offset 2.4.4 ​

Menu API ​

Menu Attributes ​

Menu Events ​

Menu Slots ​

Menu Exposes ​

SubMenu API ​

SubMenu Attributes ​

SubMenu Slots ​

Menu-Item API ​

Menu-Item Attributes ​

Menu-Item Events ​

Menu-Item Slots ​

Menu-Item-Group API ​

Menu-Item-Group Attributes ​

Menu-Item-Group Slots ​

Type Declarations ​

Source ​

Contributors ​

Menu

Top bar

Left And Right

Side bar

Collapse

Popper Offset 2.4.4

Menu API

Menu Attributes

Menu Events

Menu Slots

Menu Exposes

SubMenu API

SubMenu Attributes

SubMenu Slots

Menu-Item API

Menu-Item Attributes

Menu-Item Events

Menu-Item Slots

Menu-Item-Group API

Menu-Item-Group Attributes

Menu-Item-Group Slots

Type Declarations

Source

Contributors