Élément de navigation - DsfrNavigationItem

🌟 Introduction

L'élément de navigation est un composant conteneur qui représente un item individuel dans la liste de navigation principale. Il fournit la structure HTML appropriée et gère l'état actif pour l'accessibilité.

Le composant DsfrNavigationItem encapsule un élément de liste (<li>) avec les classes CSS appropriées du DSFR et gère l'attribut aria-current pour indiquer l'élément actif.

Important

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

📐 Structure

L'élément de navigation est composé des éléments suivants :

• un élément de liste <li> avec la classe fr-nav__item
• un identifiant unique généré automatiquement (prop id)
• l'attribut aria-current="page" quand l'élément est actif (prop active)
• un slot par défaut pour le contenu personnalisé (généralement un lien de navigation)

🛠️ Props

nom	type	défaut	obligatoire	description
id	string	() => useRandomId(...)		Identifiant unique pour l'élément de navigation
active	boolean	false		Indique si cet élément est actuellement actif

📡 Événements

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

🧩 Slots

DsfrNavigationItem possède un slot par défaut pour le contenu de l'élément de navigation.

nom	description
default	Slot par défaut pour le contenu de l'élément de navigation (généralement un lien)

📝 Exemples

Exemple d'utilisation de DsfrNavigationItem dans une navigation :

vue

<template>
  <DsfrNavigation :nav-items="navItems">
    <DsfrNavigationItem active>
      <DsfrNavigationMenuLink
        to="/accueil"
        text="Accueil"
      />
    </DsfrNavigationItem>
    <DsfrNavigationItem>
      <DsfrNavigationMenuLink
        to="/services"
        text="Services"
      />
    </DsfrNavigationItem>
  </DsfrNavigation>
</template>

⚙️ Code source du composant

DsfrNavigationItem.vue

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

import { useRandomId } from '../../utils/random-utils'

export type { DsfrNavigationItemProps }

withDefaults(defineProps<DsfrNavigationItemProps>(), {
  id: () => useRandomId('nav', 'item'),
})
</script>

<template>
  <li
    :id="id"
    class="fr-nav__item"
    :aria-current="active ? 'page' : undefined"
  >
    <!-- @slot Slot par défaut pour le contenu de l’item de liste. Sera dans `<li class="fr-nav__item">` -->
    <slot />
  </li>
</template>

<style scoped>
.fr-nav__item--active :deep(.fr-nav__link) {
  box-shadow: inset 0 -2px 0 0 var(--bf500);
}
</style>

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
  )[]
}