Catégorie de méga-menu - DsfrNavigationMegaMenuCategory

🌟 Introduction

La catégorie de méga-menu est un composant qui représente une colonne dans un méga-menu de navigation. Elle affiche un titre et une liste de liens organisés verticalement.

Le composant DsfrNavigationMegaMenuCategory crée une section structurée dans un méga-menu avec un titre cliquable et une liste de liens de navigation.

Important

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

📐 Structure

La catégorie de méga-menu est composée des éléments suivants :

• un conteneur de colonne responsive (fr-col-12 fr-col-lg-3)
• un titre de catégorie dans un élément <h5> avec lien
• une liste non-ordonnée (<ul>) de liens de navigation
• chaque lien utilise le composant DsfrNavigationMenuLink

🛠️ Props

nom	type	défaut	obligatoire	description
title	string		✅	Titre de la catégorie affiché en en-tête
links	DsfrNavigationMenuLinkProps[]		✅	Tableau des liens à afficher dans cette catégorie
active	boolean	false		Indique si cette catégorie est actuellement active

📡 Événements

DsfrNavigationMegaMenuCategory ne déclenche pas d'événements spécifiques.

🧩 Slots

DsfrNavigationMegaMenuCategory n'a pas de slots personnalisés.

📝 Exemples

Exemple d'utilisation de DsfrNavigationMegaMenuCategory dans un méga-menu :

vue

<template>
  <DsfrNavigationMegaMenu
    title="Services"
    :menus="[
      {
        title: 'Services administratifs',
        active: false,
        links: [
          { to: '/carte-identite', text: 'Carte d\'identité' },
          { to: '/passeport', text: 'Passeport' },
          { to: '/permis', text: 'Permis de conduire' },
        ],
      },
    ]"
  />
</template>

⚙️ Code source du composant

DsfrNavigationMegaMenuCategory.vue

<script setup lang="ts">
import type { DsfrNavigationMegaMenuCategoryProps } from './DsfrNavigation.types'

import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'

export type { DsfrNavigationMegaMenuCategoryProps }

withDefaults(defineProps<DsfrNavigationMegaMenuCategoryProps>(), {

})
</script>

<template>
  <div class="fr-col-12 fr-col-lg-3">
    <h5 class="fr-mega-menu__category">
      <a
        class="fr-nav__link"
        href="#"
        @click.prevent=""
      >
        {{ title }}
      </a>
    </h5>
    <ul class="fr-mega-menu__list">
      <li
        v-for="(link, idx) of links"
        :key="idx"
        class="fr-nav__link"
      >
        <DsfrNavigationMenuLink
          v-bind="link"
        />
      </li>
    </ul>
  </div>
</template>

DsfrNavigation.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrNavigationMenuLinkProps = {
  id?: string
  to?: string | RouteLocationRaw
  text?: string
  icon?: string
  onClick?: ($event: MouseEvent) => void
}

export type DsfrNavigationMenuItemProps = {
  id?: string
  active?: boolean
}

export type DsfrNavigationMenuProps = {
  id?: string
  title: string
  links?: DsfrNavigationMenuLinkProps[]
  expandedId?: string
  active?: boolean
}

export type DsfrNavigationItemProps = {
  id?: string
  active?: boolean
}

export type DsfrNavigationMegaMenuCategoryProps = {
  title: string
  active?: boolean
  links: DsfrNavigationMenuLinkProps[]
}

export type DsfrNavigationMegaMenuProps = {
  id?: string
  title: string
  description?: string
  link?: { to: RouteLocationRaw, text: string }
  menus?: DsfrNavigationMegaMenuCategoryProps[]
  expandedId?: string
  active?: boolean
}

export type DsfrNavigationMenuLinks = (DsfrNavigationMenuLinkProps | DsfrNavigationMegaMenuProps | DsfrNavigationMenuProps)[]

export type DsfrNavigationProps = {
  id?: string
  label?: string
  navItems: (
    DsfrNavigationMenuLinkProps
    | DsfrNavigationMenuProps
    | DsfrNavigationMegaMenuProps
  )[]
}