É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 classefr-nav__item
- un identifiant unique généré automatiquement (prop
id
) - l'attribut
aria-current="page"
quand l'élément est actif (propactive
) - 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 :
<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
<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>
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
)[]
}