Pied de page (Footer)

Utilisez le pied de page pour les informations institutionnelles, liens obligatoires et ressources transverses.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:footer, dsfr:footer:top, dsfr:footer:brand, dsfr:footer:content, dsfr:footer:partners, dsfr:footer:bottom

Usage

• Utilisez brandLabel pour le texte institutionnel du bloc marque.
• Composez le pied de page avec ses sous-composants.
• Les liens externes doivent conserver rel="noopener noreferrer".

Modes d'utilisation

Exemple principal

Pied de page · exemple principal

<twig:dsfr:footer>
  <twig:dsfr:footer:top :links="[
    {label: 'Plan du site', href: '/plan-du-site'}
  ]" />
  <twig:dsfr:footer:brand siteName="info.gouv.fr" brandLabel="Gouvernement" />
  <twig:dsfr:footer:content description="Service public numérique." :links="[
    {label: 'service-public.fr', href: 'https://www.service-public.fr'}
  ]" />
  <twig:dsfr:footer:partners title="Nos partenaires" :links="[
    {label: 'Service Public', href: 'https://www.service-public.fr'}
  ]" />
  <twig:dsfr:footer:bottom :links="[
    {label: 'Accessibilité', href: '/accessibilite'},
    {label: 'Données personnelles', href: '/donnees-personnelles'}
  ]" />
</twig:dsfr:footer>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:footer:top, dsfr:footer:brand, dsfr:footer:content, dsfr:footer:partners, dsfr:footer:bottom. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Données

La prop contentLinks accepte un tableau PHP/Twig. En Twig, préfixez la prop par : pour transmettre une vraie structure de données.

Syntaxe typée Twig Component

{# Le préfixe : garde le type tableau/booléen/numérique. #}
<twig:dsfr:footer :contentLinks="contentLinks" />

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:footer
  id="pied-de-page-example"
  class="fr-mt-2w"
  data-controller="pied-de-page"
/>

API publique

Composant	Rôle
dsfr:footer	Composant principal de cette page.
dsfr:footer:top	Sous-composant public utilisable en composition Twig.
dsfr:footer:brand	Sous-composant public utilisable en composition Twig.
dsfr:footer:content	Sous-composant public utilisable en composition Twig.
dsfr:footer:partners	Sous-composant public utilisable en composition Twig.
dsfr:footer:bottom	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
siteName	string	""	Nom du site. Vide = mode composition avec sous-composants.
brandLabel / siteDescription	string|null	null	Identité et description du site.
homepageHref / homepageTitle	string	/ / ""	Lien d’accueil.
contentLinks / bottomLinks	array|string	[]	Liens du contenu et bas de page.
license	bool	true	Affiche la mention de licence.
operatorLogo	bool	false	Active la zone logo opérateur.
operatorLogoSrc / operatorLogoAlt	string	""	Source et alternative du logo opérateur.
sous-composants	slot	top, brand, content, partners, bottom	Composition complète avec les sous-composants du pied de page.

Guide d'intégration

Question	Réponse
Famille DSFR	Mise en page
Quand l'utiliser	Quand vous composez une page, une zone transverse ou un bloc structurel réutilisable.
Quand éviter	Pour corriger un espacement local : utilisez d’abord les props et classes utilitaires DSFR prévues.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:footer, dsfr:footer:top, dsfr:footer:brand, dsfr:footer:content, dsfr:footer:partners, dsfr:footer:bottom.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Pied de page : composition Twig et données contentLinks

Variantes de pied de page

• composition avancée avec les sous-composants publics listés dans cette page.

Points de contrôle propres à ce composant

• Utilisez brandLabel pour le texte institutionnel du bloc marque.
• Composez le pied de page avec ses sous-composants.
• Les liens externes doivent conserver rel="noopener noreferrer".
• Vérifiez un cas vide, un cas avec plusieurs entrées et un cas avec données dynamiques pour contentLinks.
• Testez la composition avec dsfr:footer:top, dsfr:footer:brand, dsfr:footer:content, dsfr:footer:partners, dsfr:footer:bottom sans copier les templates internes.
• Renseignez une alternative textuelle utile pour les images informatives et vide pour les images décoratives.

Accessibilité mise en page

• Le composant ne remplace pas les landmarks de votre page : gardez main, nav, aside, section côté application.
• Les zones transverses doivent rester identifiables et cohérentes entre les pages.
• Vérifiez les ruptures responsive sur mobile, tablette et desktop.

Intégration Symfony/Twig pour dsfr:footer

• Passez contentLinks avec la syntaxe : pour conserver le type tableau : :contentLinks="contentLinks".
• Composez avec les sous-composants publics dsfr:footer:top, dsfr:footer:brand, dsfr:footer:content, dsfr:footer:partners, dsfr:footer:bottom quand le rendu doit être plus précis que les props.
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:footer quand ils concernent son nœud racine.

Checklist de recette

• rendu mobile sans débordement
• landmarks présents dans la page
• comportement thème clair/sombre si concerné
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les données contentLinks ne sont pas prises en compte	Ajoutez : devant la prop Twig : :contentLinks.
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.