Menú de navegación

Navegación principal del sitio o de la aplicación. Disposición horizontal o vertical; admite submenús, grupos, barra contraída y acordeón.

Menú de navegación

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <p class="demo-note">modo horizontal</p>
    <LhMenu v-model="active" mode="horizontal">
      <LhMenuItem index="home">Inicio</LhMenuItem>
      <LhSubMenu index="song" title="Pintura de la dinastía Song">
        <LhMenuItem index="fan">Fan Kuan</LhMenuItem>
        <LhMenuItem index="guo">Guo Xi</LhMenuItem>
      </LhSubMenu>
      <LhMenuItem index="yuan" disabled>Dinastía Yuan (deshabilitado)</LhMenuItem>
    </LhMenu>
    <p class="demo-note">Seleccionado: {{ active }}</p>
    <p class="demo-note">modo vertical + acordeón (uniqueOpened) + grupos</p>
    <LhMenu
      v-model="active2"
      mode="vertical"
      :collapse="collapsed"
      unique-opened
      :default-openeds="['g1']"
      style="width: 220px"
    >
      <LhSubMenu index="g1" title="Pergamino de paisajes">
        <LhMenuItemGroup title="Song del Norte">
          <LhMenuItem index="fan2">Fan Kuan</LhMenuItem>
          <LhMenuItem index="guo2">Guo Xi</LhMenuItem>
        </LhMenuItemGroup>
        <LhMenuItemGroup title="Song del Sur">
          <LhMenuItem index="li">Li Tang</LhMenuItem>
        </LhMenuItemGroup>
      </LhSubMenu>
      <LhMenuItem index="yuan2">Pintura de la dinastía Yuan</LhMenuItem>
    </LhMenu>
    <LhButton size="small" @click="collapsed = !collapsed">{{ collapsed ? 'Expandir' : 'Contraer' }} (collapse)</LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'home',
    active2: 'fan2',
    collapsed: false,
  }),
}
</script>

Menu Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Elemento activado (modelValue controlado; si no se pasa, lo mantiene el componente internamente)	string	—
mode	Modo de disposición	'horizontal' \| 'vertical'	'horizontal'
collapse	En modo vertical, contraer a una barra de iconos (los submenús pasan a paneles flotantes)	boolean	false
defaultOpeneds	Claves de los submenús abiertos por defecto (no controlado)	string[]	—
openeds	Claves de los submenús abiertos (controlado)	string[]	—
uniqueOpened	Acordeón: solo un submenú abierto a la vez	boolean	false
sx	Propiedad de diseño rápido sx	—	—

MenuItem Props

Propiedad	Descripción	Tipo	Predeterminado
index	Identificador único (obligatorio)	string	—
disabled	Si se deshabilita	boolean	false
sx	Propiedad de diseño rápido sx	—	—

SubMenu Props

Propiedad	Descripción	Tipo	Predeterminado
index	Identificador único (obligatorio)	string	—
title	Título (también se puede usar el slot title)	string	—
disabled	Si se deshabilita	boolean	false
sx	Propiedad de diseño rápido sx	—	—

MenuItemGroup Props

Propiedad	Descripción	Tipo	Predeterminado
title	Título del grupo (también se puede usar el slot title)	string	—
sx	Propiedad de diseño rápido sx	—	—

Slots

Slot	Descripción
SubMenu title	Título del submenú
SubMenu default	Contenido del submenú (aquí van MenuItem / MenuItemGroup)
MenuItemGroup title	Título del grupo
MenuItemGroup default	Elementos de menú del grupo