Lien de menu latéral - DsfrSideMenuLink

🌟 Introduction

Le lien de menu latéral est un composant qui crée automatiquement un lien cliquable dans un menu latéral. Il gère les liens externes et internes avec le routeur Vue.

Le composant DsfrSideMenuLink crée dynamiquement un élément <a> pour les liens externes ou un <RouterLink> pour les liens internes, avec la classe fr-sidemenu__link et support de l'état actif.

Important

Ce composant NE devrait PAS être utilisé directement, il est utilisé en interne par DsfrSideMenuList

📐 Structure

Le lien de menu latéral crée dynamiquement :

• un élément <a> pour les liens externes (commençant par http)
• un <RouterLink> pour les liens internes avec gestion automatique du routeur Vue
• la classe CSS fr-sidemenu__link pour le styling DSFR
• l'attribut aria-current="page" si le lien est actif

🛠️ Props

nom	type	défaut	obligatoire	description
active	boolean	false		Si le lien représente la page active
to	string	''	✅	URL ou route de destination

📡 Événements

DsfrSideMenuLink ne déclenche pas d'événements.

🧩 Slots

nom	description
default	Texte affiché du lien

📝 Exemples

Exemple d'utilisation de DsfrSideMenuLink dans un élément de menu :

vue

<template>
  <DsfrSideMenuListItem>
    <DsfrSideMenuLink
      to="/"
      active
    >
      Accueil
    </DsfrSideMenuLink>
  </DsfrSideMenuListItem>
  <DsfrSideMenuListItem>
    <DsfrSideMenuLink to="https://www.service-public.fr">
      Service Public
    </DsfrSideMenuLink>
  </DsfrSideMenuListItem>
</template>

⚙️ Code source du composant

DsfrSideMenuLink.vue

<script lang="ts" setup>
import { computed } from 'vue'

export type DsfrSideMenuLinkProps = {
  active?: boolean
  to: string
}

const props = withDefaults(defineProps<DsfrSideMenuLinkProps>(), {
  to: '',
})

defineEmits<{ (e: 'toggle-expand', payload: string): void }>()

const isExternalLink = computed(() => {
  return typeof props.to === 'string' && props.to.startsWith('http')
})
const is = computed(() => {
  return isExternalLink.value ? 'a' : 'RouterLink'
})
const linkProps = computed(() => {
  return { [isExternalLink.value ? 'href' : 'to']: props.to }
})
</script>

<template>
  <component
    :is="is"
    :aria-current="active ? 'page' : undefined"
    class="fr-sidemenu__link"
    v-bind="linkProps"
  >
    <!-- @slot Slot par défaut pour le contenu d’une liste du menu latéral -->
    <slot />
  </component>
</template>

DsfrSideMenu.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrSideMenuListItemProps = { active?: boolean }

export type DsfrSideMenuProps = {
  buttonLabel?: string
  id?: string
  sideMenuListId?: string
  collapseValue?: string
  menuItems?: DsfrSideMenuListItemProps[]
  headingTitle?: string
  titleTag?: string
  focusOnExpanding?: boolean
}

export type DsfrSideMenuButtonProps = {
  active?: boolean
  expanded?: boolean
  controlId: string
}

export type DsfrSideMenuListProps = {
  id: string
  collapsable?: boolean
  expanded?: boolean
  menuItems?: (
    DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>
    & { menuItems?: (DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>)[] }
  )[]
  focusOnExpanding?: boolean
}