Menu de navigation
Composant de navigation de page. Prend en charge les dispositions horizontale / verticelle, les sous-menus imbriqués, l'état réduit et l'accordéon ; la navigation clavier suit le pattern menu d'APG.
Disposition verticale (sous-menus intégrés)
Le mode vertical intégré prend en charge la navigation clavier : après avoir déployé un sous-menu, ↑/↓ permet de franchir les frontières entre « élément feuille ↔ titre de sous-menu ↔ élément du panneau » (Home/End sautent au premier / dernier élément) ; les éléments désactivés et ceux des panneaux repliés sont automatiquement ignorés.
Disposition verticale
- Accueil
- Paramètres▾
- Paramètres de base
- Paramètres de sécurité
- Élément désactivé
vue
<script setup>
import { ref } from 'vue'
const active = ref('home')
const active2 = ref('settings2-basic')
</script>
<template>
<!-- Disposition verticale -->
<LhMenu v-model="active">
<LhMenuItem index="home">Accueil</LhMenuItem>
<LhSubMenu index="settings" title="Paramètres">
<LhMenuItem index="settings-basic">Paramètres de base</LhMenuItem>
<LhMenuItem index="settings-security">Paramètres de sécurité</LhMenuItem>
</LhSubMenu>
<LhMenuItem index="docs" disabled>Élément désactivé</LhMenuItem>
</LhMenu>
</template>vue
<script>
export default {
data() {
return {
active: 'home',
active2: 'settings2-basic',
}
},
}
</script>
<template>
<!-- Disposition verticale -->
<LhMenu v-model="active">
<LhMenuItem index="home">Accueil</LhMenuItem>
<LhSubMenu index="settings" title="Paramètres">
<LhMenuItem index="settings-basic">Paramètres de base</LhMenuItem>
<LhMenuItem index="settings-security">Paramètres de sécurité</LhMenuItem>
</LhSubMenu>
<LhMenuItem index="docs" disabled>Élément désactivé</LhMenuItem>
</LhMenu>
</template>Contrôle du déploiement
default-openeds définit les sous-menus déployés initialement ; openeds (avec v-model:openeds) contrôle l'ensemble déployé de manière contrôlée ; unique-opened ne déploie qu'un seul sous-menu à la fois. LhSubMenu accepte également disabled pour désactiver tout le sous-menu.
Contrôle du déploiement
- Paramètres (déployé par défaut)▾
- Paramètres de base
- Paramètres de sécurité
- Gestion (désactivé)▾
- Gestion des utilisateurs
- À propos
vue
<script setup>
import { ref } from 'vue'
const active2 = ref('settings2-basic')
</script>
<template>
<!-- Contrôle du déploiement -->
<LhMenu
v-model="active2"
:default-openeds="['settings2']"
unique-opened
style="max-width: 240px"
>
<LhSubMenu index="settings2" title="Paramètres (déployé par défaut)">
<LhMenuItem index="settings2-basic">Paramètres de base</LhMenuItem>
<LhMenuItem index="settings2-security">Paramètres de sécurité</LhMenuItem>
</LhSubMenu>
<LhSubMenu index="manage" title="Gestion (désactivé)" disabled>
<LhMenuItem index="manage-users">Gestion des utilisateurs</LhMenuItem>
</LhSubMenu>
<LhMenuItem index="about2">À propos</LhMenuItem>
</LhMenu>
</template>vue
<script>
export default {
data() {
return { active2: 'settings2-basic' }
},
}
</script>
<template>
<!-- Contrôle du déploiement -->
<LhMenu
v-model="active2"
:default-openeds="['settings2']"
unique-opened
style="max-width: 240px"
>
<LhSubMenu index="settings2" title="Paramètres (déployé par défaut)">
<LhMenuItem index="settings2-basic">Paramètres de base</LhMenuItem>
<LhMenuItem index="settings2-security">Paramètres de sécurité</LhMenuItem>
</LhSubMenu>
<LhSubMenu index="manage" title="Gestion (désactivé)" disabled>
<LhMenuItem index="manage-users">Gestion des utilisateurs</LhMenuItem>
</LhSubMenu>
<LhMenuItem index="about2">À propos</LhMenuItem>
</LhMenu>
</template>Ensemble déployé contrôlé
- Paramètres▾
- Paramètres de base
vue
<script setup lang="ts">
import { ref } from 'vue'
const active2 = ref('settings2-basic')
</script>
<template>
<!-- Ensemble déployé contrôlé -->
<LhMenu v-model="active2" :openeds="['settings2']">
<LhSubMenu index="settings2" title="Paramètres">
<LhMenuItem index="settings2-basic">Paramètres de base</LhMenuItem>
</LhSubMenu>
</LhMenu>
</template>vue
<script>
export default {
data() {
return { active2: 'settings2-basic' }
},
}
</script>
<template>
<!-- Ensemble déployé contrôlé -->
<LhMenu v-model="active2" :openeds="['settings2']">
<LhSubMenu index="settings2" title="Paramètres">
<LhMenuItem index="settings2-basic">Paramètres de base</LhMenuItem>
</LhSubMenu>
</LhMenu>
</template>Disposition horizontale (sous-menus volants)
Disposition horizontale
- Accueil
- Paramètres▾
vue
<script setup lang="ts">
import { ref } from 'vue'
const active = ref('home')
</script>
<template>
<!-- Disposition horizontale -->
<LhMenu v-model="active" mode="horizontal">
<LhMenuItem index="home">Accueil</LhMenuItem>
<LhSubMenu index="settings" title="Paramètres">
<LhMenuItem index="settings-basic">Paramètres de base</LhMenuItem>
</LhSubMenu>
</LhMenu>
</template>vue
<script>
export default {
data() {
return { active: 'home' }
},
}
</script>
<template>
<!-- Disposition horizontale -->
<LhMenu v-model="active" mode="horizontal">
<LhMenuItem index="home">Accueil</LhMenuItem>
<LhSubMenu index="settings" title="Paramètres">
<LhMenuItem index="settings-basic">Paramètres de base</LhMenuItem>
</LhSubMenu>
</LhMenu>
</template>État réduit et regroupement
Réduction + regroupement
- Contenu
- Accueil
vue
<script setup lang="ts">
import { ref } from 'vue'
const active = ref('home')
</script>
<template>
<!-- Réduction + regroupement -->
<LhMenu v-model="active" collapse>
<LhMenuItemGroup title="Contenu">
<LhMenuItem index="home">Accueil</LhMenuItem>
</LhMenuItemGroup>
</LhMenu>
</template>vue
<script>
export default {
data() {
return { active: 'home' }
},
}
</script>
<template>
<!-- Réduction + regroupement -->
<LhMenu v-model="active" collapse>
<LhMenuItemGroup title="Contenu">
<LhMenuItem index="home">Accueil</LhMenuItem>
</LhMenuItemGroup>
</LhMenu>
</template>API
LhMenu Props
| Prop | Description | Type | Valeur par défaut |
|---|---|---|---|
| modelValue | Élément actif (v-model contrôlé ; maintenu en interne si non renseigné) | string | — |
| mode | Mode de disposition | "horizontal" | "vertical" | 'vertical' |
| collapse | En mode vertical, réduit le menu à une barre d'icônes (les sous-menus deviennent des panneaux volants) | boolean | false |
| defaultOpeneds | Clés des sous-menus déployés par défaut (non contrôlé) | string[] | () => [] |
| openeds | Clés des sous-menus déployés (contrôlé) | string[] | — |
| uniqueOpened | Accordéon : un seul sous-menu déployé à la fois | boolean | false |
| sx | Props de mise en page sx | LhSxProps | — |
Events
| Événement | Description | Callback |
|---|---|---|
| update:modelValue | Émis lorsque l'élément actif change (v-model) | (value: string) |
| update:openeds | Émis lorsque l'ensemble des sous-menus déployés change (v-model:openeds) | (value: string[]) |
| select | Émis lors de la sélection d'un élément de menu | (index: string, indexPath: string[]) |
| open | Émis lors du déploiement d'un sous-menu | (index: string, indexPath: string[]) |
| close | Émis lors du repli d'un sous-menu | (index: string, indexPath: string[]) |
LhMenuItem Props
| Prop | Description | Type | Valeur par défaut |
|---|---|---|---|
| index | Identifiant unique (requis) | string | — |
| disabled | Désactivé | boolean | false |
| sx | Props de mise en page sx | LhSxProps | — |
Événement : click(index) ; slot : default.
LhSubMenu Props
| Prop | Description | Type | Valeur par défaut |
|---|---|---|---|
| index | Identifiant unique (requis) | string | — |
| title | Titre (le slot title fonctionne aussi) | string | — |
| disabled | Désactivé | boolean | false |
| sx | Props de mise en page sx | LhSxProps | — |
Événement : select(index, indexPath) (remontant) ; slots : title, default (peut imbriquer d'autres LhSubMenu).
LhMenuItemGroup Props
| Prop | Description | Type | Valeur par défaut |
|---|---|---|---|
| title | Titre du groupe (le slot title fonctionne aussi) | string | — |
| sx | Props de mise en page sx | LhSxProps | — |
Slots : title, default.
Accessibilité
role="menubar"en mode horizontal,role="menu"en mode vertical ; les éléments ontrole="menuitem", les groupesrole="group"(le conteneur arole="presentation")- Le titre d'un sous-menu est lié à son panneau via
aria-haspopup+aria-expanded+aria-controls - Clavier : Enter/Space/→ déploie et place le focus sur le premier élément, ← replie, Esc ferme ; en mode vertical intégré, ↑/↓/Home/End parcourent en boucle les éléments visibles (éléments feuilles, titres de sous-menus et éléments des panneaux déployés) en franchissant les frontières, les éléments désactivés et ceux des panneaux repliés sont automatiquement ignorés
- La hauteur de déploiement intégré utilise
grid-template-rows: 0fr/1fren CSS (aucune mesure de hauteur en JS) ; les panneaux volants sont positionnés par le moteur popper (flip/shift/repli hors de la fenêtre)
Définitions de types
Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/menu/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :
LhMenuProps
ts
/** Props du menu */
export interface LhMenuProps {
/** Élément actif (v-model contrôlé ; maintenu en interne par le composant si non renseigné) */
modelValue?: string
/** Mode de disposition */
mode?: LhMenuMode
/** En mode vertical, réduit le menu à une barre d'icônes (les sous-menus deviennent des panneaux volants) */
collapse?: boolean
/** Clés des sous-menus déployés par défaut (non contrôlé) */
defaultOpeneds?: string[]
/** Clés des sous-menus déployés (contrôlé) */
openeds?: string[]
/** Accordéon : un seul sous-menu déployé à la fois */
uniqueOpened?: boolean
/** Props de mise en page sx */
sx?: LhSxProps
}LhMenuItemProps
ts
/** Props de l'élément feuille */
export interface LhMenuItemProps {
/** Identifiant unique (requis) */
index: string
disabled?: boolean
/** Props de mise en page sx */
sx?: LhSxProps
}LhSubMenuProps
ts
/** Props du sous-menu (imbrication récursive possible) */
export interface LhSubMenuProps {
/** Identifiant unique (requis) */
index: string
/** Titre (le slot title fonctionne aussi) */
title?: string
disabled?: boolean
/** Props de mise en page sx */
sx?: LhSxProps
}LhMenuItemGroupProps
ts
/** Props du groupe */
export interface LhMenuItemGroupProps {
/** Titre du groupe (le slot title fonctionne aussi) */
title?: string
/** Props de mise en page sx */
sx?: LhSxProps
}LhMenuMode (provenant de @lh-ui/share/core/menu)
ts
/** Mode de disposition du menu */
export type LhMenuMode = 'horizontal' | 'vertical'