Liste de liens d’en-tête - DsfrHeaderMenuLinks

🌟 Introduction

Le composant DsfrHeaderMenuLinkList fournit une structure de navigation sous forme de liste, en utilisant le composant DsfrHeaderMenuLink.

📐 Structure

• <DsfrHeaderMenuLinkList> : Le composant principal.
  • Englobe une liste <ul> de <DsfrHeaderMenuLink>.
  • Chaque DsfrHeaderMenuLink est un élément de la liste et est rendu dynamiquement.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
links	DsfrHeaderMenuLinkProps[]	Un tableau d'objets de props pour chaque DsfrHeaderMenuLink.	[]
navAriaLabel	string	Label ARIA pour la navigation, utile pour l'accessibilité.	'Menu secondaire'

📡 Événements

• linkClick : Événement déclenché lorsque l'un des liens est cliqué. Fournit l'événement de clic (MouseEvent) comme paramètre.

🧩 Slots

Pas de slots spécifiques. Le contenu est généré dynamiquement en fonction de la prop links.

📝 Exemples

Ce composant est utilisé en interne dans DsfrHeader. Il n’y a pas de raison de l’utiliser en dehors.

⚙️ Code source du composant

DsfrHeaderMenuLinks.vue

<script lang="ts" setup>
import DsfrHeaderMenuLink, { type DsfrHeaderMenuLinkProps } from './DsfrHeaderMenuLink.vue'

export type {
  DsfrHeaderMenuLinkProps,
}

withDefaults(defineProps<{
  links?: DsfrHeaderMenuLinkProps[]
  navAriaLabel?: string
}>(), {
  links: () => [],
  navAriaLabel: 'Menu secondaire',
})

const emit = defineEmits<{ linkClick: [event: MouseEvent] }>()
</script>

<template>
  <nav
    role="navigation"
    :aria-label="navAriaLabel"
  >
    <ul
      class="fr-btns-group"
    >
      <li
        v-for="(quickLink, index) in links"
        :key="index"
      >
        <DsfrHeaderMenuLink
          v-bind="quickLink"
          :on-click="($event) => { emit('linkClick', $event); quickLink.onClick?.($event) }"
        />
      </li>
    </ul>
  </nav>
</template>

DsfrHeader.types.ts

import type { HTMLAttributes, StyleValue } from 'vue'
import type { RouteLocationRaw } from 'vue-router'

import type { DsfrLanguageSelectorProps } from '../DsfrLanguageSelector/DsfrLanguageSelector.types'
import type VIcon from '../VIcon/VIcon.vue'

export type DsfrHeaderMenuLinkProps = {
  button?: boolean
  icon?: string | InstanceType<typeof VIcon>['$props']
  iconAttrs?: InstanceType<typeof VIcon>['$props'] & HTMLAttributes
  iconRight?: boolean
  label?: string
  target?: string
  onClick?: ($event: MouseEvent) => void
  to?: RouteLocationRaw
  /**
   * @deprecated Use the prop `to` instead
   */
  href?: string
  /**
   * @deprecated Use the prop `to` instead
   */
  path?: string
}

export type DsfrHeaderProps = {
  searchbarId?: string
  serviceTitle?: string
  serviceDescription?: string
  homeTo?: string
  logoText?: string | string[]
  modelValue?: string
  operatorImgAlt?: string
  operatorImgSrc?: string
  operatorImgStyle?: StyleValue
  placeholder?: string
  quickLinks?: (DsfrHeaderMenuLinkProps & HTMLAttributes)[]
  languageSelector?: DsfrLanguageSelectorProps
  searchLabel?: string
  quickLinksAriaLabel?: string
  showSearch?: boolean
  showSearchLabel?: string
  showBeta?: boolean
  menuLabel?: string
  menuModalLabel?: string
  closeMenuModalLabel?: string
  homeLabel?: string
}