Menu de navigation

Navigation principale de site ou d'application. Deux dispositions, horizontale et verticale ; prend en charge les sous-menus, les groupes, la barre repliable et l'accordéon.

Menu de navigation

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <p class="demo-note">Mode horizontal</p>
    <LhMenu v-model="active" mode="horizontal">
      <LhMenuItem index="home">Accueil</LhMenuItem>
      <LhSubMenu index="song" title="Peinture de la dynastie Song">
        <LhMenuItem index="fan">Fan Kuan</LhMenuItem>
        <LhMenuItem index="guo">Guo Xi</LhMenuItem>
      </LhSubMenu>
      <LhMenuItem index="yuan" disabled>Dynastie Yuan (désactivé)</LhMenuItem>
    </LhMenu>
    <p class="demo-note">Sélection : {{ active }}</p>
    <p class="demo-note">Mode vertical + accordéon (uniqueOpened) + groupes</p>
    <LhMenu
      v-model="active2"
      mode="vertical"
      :collapse="collapsed"
      unique-opened
      :default-openeds="['g1']"
      style="width: 220px"
    >
      <LhSubMenu index="g1" title="Rouleau de paysages">
        <LhMenuItemGroup title="Song du Nord">
          <LhMenuItem index="fan2">Fan Kuan</LhMenuItem>
          <LhMenuItem index="guo2">Guo Xi</LhMenuItem>
        </LhMenuItemGroup>
        <LhMenuItemGroup title="Song du Sud">
          <LhMenuItem index="li">Li Tang</LhMenuItem>
        </LhMenuItemGroup>
      </LhSubMenu>
      <LhMenuItem index="yuan2">Peinture de la dynastie Yuan</LhMenuItem>
    </LhMenu>
    <LhButton size="small" @click="collapsed = !collapsed">{{ collapsed ? 'Déplier' : 'Replier' }} (collapse)</LhButton>
  </div>
</template>

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

Menu Props

Propriété	Description	Type	Valeur par défaut
v-model	Élément actif (modelValue contrôlé ; géré en interne par le composant si non transmis)	string	—
mode	Mode de disposition	'horizontal' \| 'vertical'	'horizontal'
collapse	Replie le mode vertical en barre d'icônes (les sous-menus deviennent des panneaux volants)	boolean	false
defaultOpeneds	Clés des sous-menus ouverts par défaut (non contrôlé)	string[]	—
openeds	Clés des sous-menus ouverts (contrôlé)	string[]	—
uniqueOpened	Accordéon : un seul sous-menu ouvert à la fois	boolean	false
sx	Raccourci de mise en page sx	—	—

MenuItem Props

Propriété	Description	Type	Valeur par défaut
index	Identifiant unique (obligatoire)	string	—
disabled	Désactivé	boolean	false
sx	Raccourci de mise en page sx	—	—

SubMenu Props

Propriété	Description	Type	Valeur par défaut
index	Identifiant unique (obligatoire)	string	—
title	Titre (ou slot title)	string	—
disabled	Désactivé	boolean	false
sx	Raccourci de mise en page sx	—	—

MenuItemGroup Props

Propriété	Description	Type	Valeur par défaut
title	Titre du groupe (ou slot title)	string	—
sx	Raccourci de mise en page sx	—	—

Slots

Slot	Description
SubMenu title	Titre du sous-menu
SubMenu default	Contenu du sous-menu (y placer des MenuItem / MenuItemGroup)
MenuItemGroup title	Titre du groupe
MenuItemGroup default	Éléments du groupe