Menu

Menú que proporciona navegación para su sitio web.

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;
}

Barra superior

Menú de barra superior, se puede utilizar en una variedad de escenarios.

Por defecto Menú es vertical, pero puedes cambiarlo a horizontal ajustando el modo prop a 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. El menú proporciona background-color, text-color y active-text-color para personalizar los colores.

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>

Izquierda y derecha

Puede hacer que los elementos del menú estén a la izquierda o a la derecha.

Barra lateral

Menú vertical con submenús.

Puede usar el componente el-menu-item-group para crear un grupo de menús, y el nombre del grupo está determinado por la propiedad title o un slot con nombre.

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

El menú vertical puede ser colapsado.

expandcollapse

Popper Offset 2.4.4

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

Nombre	Descripción	Tipo	Default
mode	modo de visualización del menú	`enum`	vertical
collapse	si el menú está colapsado (solo en modo vertical)	`boolean`	false
ellipsis	si el menú es elipsis (disponible sólo en modo horizontal)	`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	índice del menú activo al cargar la página	`string`	''
default-openeds	array que contiene los índices de los sub-menús activos actualmente	`object`	[]
unique-opened	si sólo un submenú puede estar activo	`boolean`	false
menu-trigger	cómo se activan los submenús, solo funciona cuando `mode` es 'horizontal'	`enum`	hover
router	si el modo `vue-router` está activado. Si es verdadero, el índice se utilizará como 'ruta' para activar la acción de la ruta. Utilice con `default-active` para establecer el elemento activo en carga.	`boolean`	false
collapse-transition	si habilitar transition en el colapso	`boolean`	true
popper-effect 2.2.26	Tema Tooltip, tema integrado: `dark` / `light` cuando el menú está colapsado	`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`	—
popper-style 2.11.5	custom style for all popup menus	`string` / `object`	—
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
persistent 2.9.5	when menu inactive and `persistent` is `false` , dropdown menu will be destroyed	`boolean`	true

Nombre	Descripción	Tipo
select	callback ejecutado cuando el menú es activado	`Function`
open	función callback cuando el submenú se expande	`Function`
close	función callback cuando el submenú colapsa	`Function`

Nombre	Descripción	Subtags
default	personaliza el contenido por defecto	SubMenu / Menu-Item / Menu-Item-Group

Nombre	Descripción	Tipo
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`
handleResize	manually trigger menu width recalculation	`Function`
updateActiveIndex 2.9.8	set index of active menu	`Function`

SubMenu API

SubMenu Attributes

Nombre	Descripción	Tipo	Por defecto
index required	identificador único	`string`	—
popper-class	nombre personalizado de la clase del menú popup	`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	si el submenú está deshabilitado	`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	El icono cuando el menú se expanda y el submenú se cierran, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string` / `Component`	—
expand-open-icon	El icono cuando el menú se expanda y el submenú se abre, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string` / `Component`	—
collapse-close-icon	El icono cuando el menú se expanda y el submenú se cierra, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string` / `Component`	—
collapse-open-icon	El icono cuando el menú se expanda y el submenú se abra, `expand-close-icon` y `expand-open-icon` deben pasarse juntos para que surtan efecto	`string` / `Component`	—

SubMenu Slots

Nombre	Descripción	Subtags
default	personaliza el contenido por defecto	SubMenu / Menu-Item / Menu-Item-Group
title	personalizar contenido del título	—

Nombre	Descripción	Type	Por defecto
index required	identificador único	`string`	—
route	Vue Router Route Location Parameters	`string` / `object`	—
disabled	si está desactivado	`boolean`	false

Nombre	Descripción	Type
click	callback function when menu-item is clicked, the param is menu-item instance	`Function`

Nombre	Descripción
default	personaliza el contenido por defecto
title	personalizar contenido del título

Nombre	Descripción	Type	Por defecto
title	título del grupo	`string`	—

Name	Descripción	Subtags
default	personaliza el contenido por defecto	Menu-Item
title	personalizar título del grupo	—

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
}

Fuente

Componentes • Style • Documentación

Contribuidores

Dropdown

Page Header

Barra superior

Izquierda y derecha

Barra lateral

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

Fuente

Contribuidores

Menu ​

Barra superior ​

Izquierda y derecha ​

Barra lateral ​

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 ​

Fuente ​

Contribuidores ​

Menu

Barra superior

Izquierda y derecha

Barra lateral

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

Fuente

Contribuidores