Thème Paris.fr

Header - En-tête de contenu HTML5

macro @cHeader

Génère un élément d'en-tête HTML avec un titre optionnel pouvant être rendu sous forme de lien. Utile pour les en-têtes de page ou de section sur les pages du thème.

Exemple

Welcome to Our Site

Navigation content here

<@cHeader title='Welcome to Our Site'>
    <@cText>Navigation content here</@cText>
</@cHeader>

²<@cHeader title='Home' titleUrl='/jsp/site/Portal.jsp' titleUrlClass='text-decoration-none' titleLevel=1 class='page-header'>
    <@cText>Site tagline or description</@cText>
</@cHeader>

<header >
<h2>
Welcome to Our Site</h2>
<p>
Navigation content here</p>
</header>
<header class="page-header" >
<h1>
<a href="/jsp/site/Portal.jsp" class="text-decoration-none" title="Home">Home</a></h1>
<p>
Site tagline or description</p>
</header>

Paramètres

Génère un élément d'en-tête HTML avec un titre optionnel pouvant être rendu sous forme de lien. Utile pour les en-têtes de page ou de section sur les pages du thème.

title (string)
optional
- Titre affiché dans l'en-tête. Par défaut: ''
titleClass (string)
optional
- Classe(s) CSS appliquée(s) à l'élément de titre. Par défaut: ''
titleUrl (string)
optional
- URL du lien du titre ; lorsqu'elle est définie, le titre devient un lien cliquable. Par défaut: ''
titleUrlClass (string)
optional
- Classe(s) CSS appliquée(s) au lien du titre. Par défaut: ''
titleLevel (number)
optional
- Niveau de titre pour le titre de l'en-tête (1-6). Par défaut: 2
class (string)
optional
- Classe(s) CSS appliquée(s) à l'élément d'en-tête. Par défaut: ''
id (string)
optional
- L'identifiant unique de l'élément d'en-tête. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires pour l'élément d'en-tête. Par défaut: ''

Navigation principale

macro @cMainNav

Génère une barre de navigation principale avec des fonctionnalités optionnelles de recherche, connexion et barre latérale.

Exemple

Par défaut, le menu principal est horizontal. Vous pouvez le passer en "vertical" en cochant "Menu vertical" dans les propriétés du "Thème Paris.fr" dans le Back Office.

Menu principal

Menu principal vertical

	<@cMainNav title='Thème Paris.fr' />
	<@cMainNav title='Thème Paris.fr' isSidebar=true />

Paramètres

Génère une barre de navigation principale avec recherche, connexion optionnelles et la possibilité d'afficher une barre latérale.

title (string)
required
- Titre du site affiché dans la barre de navigation. Par défaut: favourite
brandAriaLabel (string)
required
-
new
Libellé ARIA pour l'élément "navbar-brand", titre du site. Par défaut: favourite
logoImg (string)
optional
- URL de l'image du logo. Par défaut: ''
href (string)
optional
- URL liée au logo/titre. Par défaut: '.'
hasMenu (boolean)
optional
- Si true, affiche le menu du site. Par défaut: hasDefaultMenu?boolean
hasUserThemeSwitch (boolean)
optional
- Si true, affiche le bouton de bascule de thème clair/sombre. Par défaut: hasUserThemeSwitch?boolean
hasNestedMenu (boolean)
optional
- Si true, affiche le contenu imbriqué en tant qu'entrées de menu supplémentaires. Par défaut: true
isSidebar (boolean)
optional
- Si true, affiche une navigation en barre latérale verticale. Par défaut: isMainSidebarMenu?boolean
isSidebarCollapsible (boolean)
optional
- Si true, le menu de la barre latérale peut être replié. Par défaut: isMainSidebarMenuCollapse?boolean
sidebarMenuClass (string)
optional
- Classe CSS supplémentaire pour le menu de la barre latérale. Par défaut: ''
isOnlyHome (boolean)
optional
- Si true, la bannière n'est affichée que sur la page d'accueil. Par défaut: isBannerOnlyHome
showDefaultMenu (boolean)
optional
- Si true, affiche le menu de pages par défaut. Par défaut: true
hasSearchMenu (boolean)
optional
- Si true, ajoute une fonction de recherche au menu. Par défaut: false
typeSearch (string)
optional
- Type d'affichage de la recherche: "field" pour un formulaire de saisie, "icon" pour un lien de recherche. Par défaut: 'field'
searchUrl (string)
optional
- URL du lien de l'icône de recherche. Par défaut: urlDefaultSearch
searchAction (string)
optional
- URL d'action du formulaire lorsque typeSearch vaut "field". Par défaut: 'jsp/site/Portal.jsp'
searchSolr (boolean)
optional
- Si true, effectue les recherches via Solr au lieu du moteur par défaut. Par défaut: false
searchParams (string)
optional
- Champs cachés supplémentaires pour le formulaire de recherche. Par défaut: ''
isFixed (boolean)
optional
- Si true, la barre de navigation est fixée en haut de la page. Par défaut: isFixedMenu?boolean
hasLogin (boolean)
optional
- Si true, affiche un bouton de connexion. Par défaut: false
loginClass (string)
optional
- Classe CSS du bouton de connexion. Par défaut: ''
mainClass (string)
optional
- Classe CSS de l'élément main. Par défaut: ''
id (string)
optional
- L'identifiant unique de la barre de navigation. Par défaut: ''
class (string)
optional
- Classe(s) CSS supplémentaire(s) pour la barre de navigation. Par défaut: ''
role (string)
optional
- Attribut de rôle ARIA pour la barre de navigation. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires pour la barre de navigation. Par défaut: ''

Entrée de menu

macro @cMainNavItem

Génère un élément de navigation unique (élément li avec un lien optionnel) à utiliser à l'intérieur de la barre de navigation principale.

Exemple

<@cMainNav hasMenu=false isSidebar=false isSidebarCollapsible=false title='Paris' hasLogin=false mainClass='h-50' params='style="position:static"'>
  <@cMainNavItem title='Getting Started' url='jsp/site/Portal.jsp?page_id=7' />
  <@cMainNavItem title='Styles' url='jsp/site/Portal.jsp?page_id=48' />
  <@cMainNavItem title='Components' url='jsp/site/Portal.jsp?page_id=6' />
  <@cMainNavItem title='Templates' url='jsp/site/Portal.jsp?page_id=35' />
</@cMainNav>

Paramètres

Génère un élément de navigation unique (élément li avec un lien optionnel) à utiliser à l'intérieur de la barre de navigation principale.

title (string)
required
- Texte du label pour l'élément de navigation
url (string)
required
- URL de destination. Si vide, seul le contenu imbriqué est rendu sans enveloppe de lien
urlClass (string)
optional
- Classe(s) CSS pour l'élément ancre. Par défaut: ''
target (string)
optional
- Attribut target du lien ('_top', '_blank', '_parent'). Par défaut: ''
role (string)
optional
- Rôle ARIA pour le lien. Par défaut: 'navitem'
showTitle (boolean)
optional
- Si true, ajoute un attribut title avec le texte du label. Par défaut: false
id (string)
optional
- Identifiant unique pour l'élément de liste. Par défaut: ''
class (string)
optional
- Classe(s) CSS supplémentaire(s) pour l'élément de liste. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires pour l'élément de liste. Par défaut: ''

Menu utilisateur

macro @cMainNavUser

Génère le menu d'authentification utilisateur avec un menu déroulant de connexion/inscription pour les utilisateurs anonymes et un menu déroulant de tableau de bord du compte pour les utilisateurs connectés.

Exemple

<@cMainNavUser connected=false userName='' urlConnect='jsp/site/Portal.jsp?page=mylutece&action=login' />

<@cMainNavUser connected=true userName='John D.' urlConnect='jsp/site/Portal.jsp?page=mylutece&action=logout' userFullName='John Doe' userEmail='john.doe@example.com'>
    <@cText><@cLink href='jsp/site/Portal.jsp?page=myservices' label='My Services' /></@cText>
</@cMainNavUser>

Paramètres

Génère le menu d'authentification utilisateur avec un menu déroulant de connexion/inscription pour les utilisateurs anonymes et un menu déroulant de tableau de bord du compte pour les utilisateurs connectés.

connected (boolean)
required
- Indique si une session utilisateur existe
userName (string)
required
- Nom d'affichage de l'utilisateur connecté
urlConnect (string)
required
- URL de l'action de connexion ou de déconnexion
btnToggle (boolean)
optional
- Si true, ouvre le menu utilisateur dans un menu déroulant. Par défaut: true
userFullName (string)
optional
- Nom complet de l'utilisateur connecté. Par défaut: ''
userEmail (string)
optional
- Adresse e-mail de l'utilisateur connecté. Par défaut: ''
userInitials (string)
optional
- Initiales de l'utilisateur connecté pour l'affichage de l'avatar. Par défaut: ''
hasIcon (boolean)
optional
- Si true, affiche une icône utilisateur. Par défaut: false
title (string)
optional
- Label accessible pour le bouton/l'icône de connexion. Par défaut: ''
id (string)
optional
- L'identifiant unique de l'élément de menu. Par défaut: ''
class (string)
optional
- Classe(s) CSS supplémentaire(s) pour l'élément de menu. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires pour l'élément de menu. Par défaut: ''

Navigation rapide

macro @skipNav

Génère un menu de navigation rapide accessible, permettant aux utilisateurs clavier d'accéder directement au contenu principal ou au menu du site.

Exemple

<@skipNav />
<@skipNav target='page-content' skipMenu=false />

Paramètres

Génère un menu de navigation rapide accessible, permettant aux utilisateurs clavier d'accéder directement au contenu principal ou au menu du site.

Pour révéler le menu, utilisez les touches de navigation clavier et naviguez jusqu'au menu du site.

target (string)
optional
- Identifiant de l'élément de contenu principal vers lequel sauter. Par défaut: 'main'
skipMenu (boolean)
optional
- Si true, affiche un lien supplémentaire pour sauter vers le menu du site. Par défaut: true

Bandeau principal

macro @cMainBanner

Génère une section de bandeau principal pour le site, avec une image de fond, un titre et un mode d'affichage limité à l'accueil optionnels.

Exemple

<@cMainBanner title='City Services' titleClass='text-white' onlyHome=true imageSrc='images/banner.jpg' class='banner-lg' />

<div class="banner-wrapper is-fixed banner-lg position-relative bg-banner internal">
<div class="banner banner-lg position-relative bg-banner internal credits page-" id="main-banner" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" style="background-image:url(images/banner.jpg);" >
<h1 id="main-banner-title" class="text-white">City Services</h1>
</div>
</div>

Paramètres

Génère une section de bandeau principal pour le site, avec une image de fond, un titre et un mode d'affichage limité à l'accueil optionnels.

title (string)
required
- Texte du titre du bandeau. Par défaut: 'Thème Paris.fr'
titleClass (string)
optional
- Classe CSS ajoutée au titre du bandeau. Par défaut: ''
onlyHome (boolean)
required
- Si true, le bandeau n'est affiché que sur la page d'accueil. Par défaut: isBannerOnlyHome
imageSrc (string)
required
- Chemin vers une image de fond couvrant toute la zone du bandeau. Par défaut: urlDefaultBannerImage
class (string)
optional
- Classe(s) CSS supplémentaire(s) pour le bandeau. Par défaut: ''
id (string)
optional
- Identifiant unique de l'élément bandeau. Par défaut: 'main-banner'
params (string)
optional
- Attributs HTML supplémentaires pour l'élément bandeau. Par défaut: ''

Fil d'ariane - @cBreadCrumb

macro @cBreadCrumb

Exemple

<@cBreadCrumb home='Home' type='fluid' items=[
    { 'title': 'Services', 'url': 'jsp/site/Portal.jsp?page=services' },
    { 'title': 'Contact', 'url': '' }
] />

<nav aria-label="breadcrumb" class="breadcrumb-nav" role="nav">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a target="_top" href=".">Home</a>
</li>
<li class="breadcrumb-item ">
<a href="jsp/site/Portal.jsp?page=services" title="Services" target="_top">
<span>Services</span>
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<span>Contact</span>
</li>
</ol>
</div>
</nav>

Paramètres

Génère un fil d'Ariane de navigation pour la page courante, aidant les utilisateurs à naviguer dans la hiérarchie du site.

home (string)
required
- Label du lien vers la page d'accueil. Par défaut: ''
items (list)
required
- Liste des éléments du fil d'Ariane, chacun avec les attributs 'title' et 'url'. Par défaut: ''
class (string)
optional
- Classe(s) CSS supplémentaire(s) pour la nav du fil d'Ariane. Par défaut: ''
type (string)
optional
- Si 'fluid', le fil d'Ariane occupe toute la largeur de la page. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires pour l'élément nav du fil d'Ariane. Par défaut: ''

Pied de page

macro @cFooter

Génère un élément de pied de page HTML avec un titre optionnel. Adapté aux pieds de page ou aux pieds de section sur les pages skin.

Exemple

<@cFooter>
    <@cText>Copyright 2026 - All rights reserved.</@cText>
</@cFooter>

<@cFooter title='Site Information' titleLevel=3 class='site-footer'>
    <@cText>Contact us at info@example.com</@cText>
</@cFooter>

<footer class="p-m" >
<p>
Copyright 2026 - All rights reserved.</p>
</footer>
<footer class="site-footer p-m" >
<h3>
Site Information</h3>
<p>
Contact us at info@example.com</p>
</footer>

Paramètres

Génère un élément de pied de page HTML avec un titre optionnel. Adapté aux pieds de page ou aux pieds de section sur les pages skin.

title (string)
optional
- Titre affiché à l'intérieur du pied de page. Par défaut: ''
titleLevel (number)
optional
- Niveau de titre pour le titre du pied de page (1-6). Par défaut: 2
class (string)
optional
- Classe(s) CSS appliquée(s) à l'élément pied de page. Par défaut: ''
id (string)
optional
- Identifiant unique de l'élément pied de page. Par défaut: ''
params (string)
optional
- Attributs HTML supplémentaires pour l'élément pied de page. Par défaut: ''

Pied de page principal

macro @cMainFooter

Génère le pied de page principal du site avec des liens de navigation, des icônes de réseaux sociaux et des informations de copyright.

Exemple

<@cMainFooter title='My City Portal' />

<@cMainFooter title='City Services' nested_pos='before'>
    <@cMainNavItem title='FAQ' url='jsp/site/Portal.jsp?page_id=3#section-cmainfooter' />
</@cMainFooter>

<footer role="contentinfo">
<div class="container">
<div class="main-footer justify-content-center">
<div class="navbar">
<a class="navbar-brand hide-icon-target" href="https://www.paris.fr" target="_blank" aria-label="">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="Go to the site Paris.fr" title="Go to the site Paris.fr">
</a>
</div>
</div>
<div class="main-footer justify-content-center">
<div class="navbar">
<ul class="nav d-flex justify-content-center justify-content-md-start" aria-label="Footer information" >
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr" target="_blank">
Paris.fr <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jsp/site/Portal.jsp?page=map" >
site map
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/contact-232" target="_blank">
Contact <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Condition généales d&#39;utilisation <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Politique de gestion des données à caractère personnel <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/cookies-234" target="_blank">
Cookies policy <span class="visually-hidden">[New window]</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<footer role="contentinfo">
<div class="container">
<div class="main-footer justify-content-center">
<div class="navbar">
<a class="navbar-brand hide-icon-target" href="https://www.paris.fr" target="_blank" aria-label="">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="Go to the site Paris.fr" title="Go to the site Paris.fr">
</a>
</div>
</div>
<div class="main-footer justify-content-center">
<div class="navbar">
<ul class="nav d-flex justify-content-center justify-content-md-start" aria-label="Footer information" >
<li class="nav-item">
<a class="nav-link" role="navitem" href="jsp/site/Portal.jsp?page_id=3#section-cmainfooter" >
FAQ
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr" target="_blank">
Paris.fr <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jsp/site/Portal.jsp?page=map" >
site map
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/contact-232" target="_blank">
Contact <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Condition généales d&#39;utilisation <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Politique de gestion des données à caractère personnel <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/cookies-234" target="_blank">
Cookies policy <span class="visually-hidden">[New window]</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>

Paramètres

Génère le pied de page principal du site avec des liens de navigation, des icônes de réseaux sociaux et des informations de copyright.

title (string)
required
- Nom du service numérique affiché dans le pied de page. Par défaut: mainSite
brandAriaLabel (string)
optional

new
- Label ARIA de l'élément "navbar-brand", titre du site. Par défaut: récupère le nom depuis la variable "favourite".
logoFooterImg (string)
optional
- URL de l'image à afficher dans le pied de page. Par défaut: ''
New
logoFooterAlt (string)
optional
- Texte alternatif pour l'image. Par défaut: ''
New
nested_pos (string)
required
- Position du contenu imbriqué par rapport au menu du pied de page: 'before' ou 'after'. Par défaut: 'after'
params (string)
optional
- Attributs HTML supplémentaires pour l'élément de pied de page. Par défaut: ''

Pied de page avec réseaux sociaux

macro @cMainFooterSocial

Génère le pied de page principal du site avec des boutons de réseaux sociaux (Facebook, X, Instagram, LinkedIn) et des liens de navigation, selon la mise en page Paris.fr.

Exemple

<@cMainFooterSocial title='City Portal' />

<@cMainFooterSocial title='My Service' align='between' classColMain='col-md-8' classColSocial='col-md-4' nested_pos='before'>
	<@cMainNavItem title='FAQ' url='jsp/site/Portal.jsp?page_id=3#section-cmainfooter' />
</@cMainFooterSocial>

<footer class="social z-1" role="contentinfo">
<div class="row m-0">
<div class="col-12 col-md-8">
<div class="main-footer justify-content-center justify-content-lg-start">
<div class="navbar">
<a class="navbar-brand" href="https://www.paris.fr" target="_blank" aria-label="">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="" title="">
</a>
</div>
</div>
<div class="main-footer justify-content-center justify-content-lg-start">
<div class="navbar">
<ul class="nav d-flex justify-content-center justify-content-md-start" aria-label="Footer information" >
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr" target="_blank">
Paris.fr <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jsp/site/Portal.jsp?page=map" >
site map
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/contact-232" target="_blank">
Contact <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Condition généales d&#39;utilisation <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Politique de gestion des données à caractère personnel <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/cookies-234" target="_blank">
Cookies policy <span class="visually-hidden">[New window]</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 main-bg-color col-md-4 d-flex justify-align-items">
<div class="social-links">
<h2 class="paris-footer-social-title text-center text-gray">Follow us</h2>
<ul class="list-inline text-center">
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de Facebook" href="https://www.facebook.com/paris">
<svg class="paris-icon paris-icon-facebook" role="img" aria-labelledby="paris-icon-title-fb" focusable="false">
<title id="paris-icon-title-fb">Facebook</title>
<use xlink:href="#paris-icon-facebook" width="24" height="24" ></use>
</svg>
</a>
</li>
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de Bluesky" href="https://bsky.app/profile/paris.fr">
<svg class="paris-icon paris-icon-bs" role="img" aria-labelledby="paris-icon-title-bs" focusable="false">
<title id="paris-icon-title-bs">Bluesky</title>
<use xlink:href="#paris-icon-bs" width="24" height="24" ></use>
</svg>
</a>
</li>
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de Instagram" href="https://www.instagram.com/paris_maville/">
<svg class="paris-icon paris-icon-instagram" role="img" aria-labelledby="paris-icon-title-in" focusable="false">
<title id="paris-icon-title-in">Instagram</title>
<use xlink:href="#paris-icon-instagram" width="24" height="24" ></use>
</svg>
</a>
</li>
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de LinkedIn" href="https://www.linkedin.com/company/villedeparis/">
<svg class="paris-icon paris-icon-linkedin" role="img" aria-labelledby="paris-icon-title-li" focusable="false">
<title id="paris-icon-title-li">LinkedIn</title>
<use xlink:href="#paris-icon-linkedin" width="24" height="24" ></use>
</svg>
</a>
</li>
</ul>
<p class="paris-footer-social-title text-center">Get weekly news from your city on social’s network</p>
</div>
</div>
</div>
</footer>
<footer class="social z-1" role="contentinfo">
<div class="row m-0">
<div class="col-12 col-md-8">
<div class="main-footer justify-content-center justify-content-lg-between">
<div class="navbar">
<a class="navbar-brand" href="https://www.paris.fr" target="_blank" aria-label="">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="" title="">
</a>
</div>
</div>
<div class="main-footer justify-content-center justify-content-lg-between">
<div class="navbar">
<ul class="nav d-flex justify-content-center justify-content-md-start" aria-label="Footer information" >
<li class="nav-item">
<a class="nav-link" role="navitem" href="jsp/site/Portal.jsp?page_id=3#section-cmainfootersocial" >
FAQ
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr" target="_blank">
Paris.fr <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jsp/site/Portal.jsp?page=map" >
site map
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/contact-232" target="_blank">
Contact <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Condition généales d&#39;utilisation <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank">
Politique de gestion des données à caractère personnel <span class="visually-hidden">[New window]</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.paris.fr/pages/cookies-234" target="_blank">
Cookies policy <span class="visually-hidden">[New window]</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 main-bg-color col-md-4 d-flex justify-align-items">
<div class="social-links">
<h2 class="paris-footer-social-title text-center text-gray">Follow us</h2>
<ul class="list-inline text-center">
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de Facebook" href="https://www.facebook.com/paris">
<svg class="paris-icon paris-icon-facebook" role="img" aria-labelledby="paris-icon-title-fb" focusable="false">
<title id="paris-icon-title-fb">Facebook</title>
<use xlink:href="#paris-icon-facebook" width="24" height="24" ></use>
</svg>
</a>
</li>
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de Bluesky" href="https://bsky.app/profile/paris.fr">
<svg class="paris-icon paris-icon-bs" role="img" aria-labelledby="paris-icon-title-bs" focusable="false">
<title id="paris-icon-title-bs">Bluesky</title>
<use xlink:href="#paris-icon-bs" width="24" height="24" ></use>
</svg>
</a>
</li>
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de Instagram" href="https://www.instagram.com/paris_maville/">
<svg class="paris-icon paris-icon-instagram" role="img" aria-labelledby="paris-icon-title-in" focusable="false">
<title id="paris-icon-title-in">Instagram</title>
<use xlink:href="#paris-icon-instagram" width="24" height="24" ></use>
</svg>
</a>
</li>
<li class="list-inline-item">
<a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de LinkedIn" href="https://www.linkedin.com/company/villedeparis/">
<svg class="paris-icon paris-icon-linkedin" role="img" aria-labelledby="paris-icon-title-li" focusable="false">
<title id="paris-icon-title-li">LinkedIn</title>
<use xlink:href="#paris-icon-linkedin" width="24" height="24" ></use>
</svg>
</a>
</li>
</ul>
<p class="paris-footer-social-title text-center">Get weekly news from your city on social’s network</p>
</div>
</div>
</div>
</footer>

Paramètres

Génère le pied de page principal du site avec des boutons de réseaux sociaux (Facebook, X, Instagram, LinkedIn) et des liens de navigation, selon la mise en page Paris.fr.

title (string)
required
- Nom du service numérique affiché dans le pied de page
brandAriaLabel (string)
optional

new
- Libellé ARIA pour l'élément "navbar-brand", titre du site. Par défaut: récupère le nom depuis la variable "favourite".
nested_pos (string)
optional
- Position du contenu imbriqué par rapport au menu du pied de page: 'before' ou 'after'. Par défaut: 'after'
logoFooterImg (string)
optional
- URL de l'image à afficher dans le pied de page. Par défaut: ''
New
logoFooterAlt (string)
optional
- Texte alternatif de l'image. Par défaut: ''
New
socialNested (string)
optional
- Contenu HTML supplémentaire affiché au-dessus de la section des liens sociaux. Par défaut: ''
align (string)
optional
- Alignement flex pour la zone du menu ('around', 'between', 'start', 'end', 'evenly'). Par défaut: 'around'
classColMain (string)
optional
- Classe de colonne Bootstrap pour la zone du menu. Par défaut: 'col-md-7'
classColSocial (string)
optional
- Classe de colonne Bootstrap pour la zone des réseaux sociaux. Par défaut: 'col-md-5'
params (string)
optional
- Attributs HTML supplémentaires pour l'élément de pied de page. Par défaut: ''

Retour en haut de page

macro @cGoToTop

Génère un bouton "retour en haut de page" qui apparaît après avoir fait défiler la page vers le bas et la fait défiler en douceur jusqu'en haut lorsqu'on clique dessus.

Exemple

Le bouton "Retour en haut de page" apparaît après avoir fait défiler la page vers le bas. Cliquer dessus fait défiler la page en douceur jusqu'en haut.

Pour faire apparaître le bouton, faites défiler la page vers le bas. Par défaut, il s'affiche en bas à droite de la page.

<@cGoToTop />

Paramètres

Génère un bouton "retour en haut de page" qui apparaît après avoir fait défiler la page vers le bas et la fait défiler en douceur jusqu'en haut lorsqu'on clique dessus.

scrollLabel (string)
optional
- Texte du label accessible pour le bouton. Par défaut: ''
scrollClass (string)
optional
- Classe(s) CSS pour l'effet d'animation de défilement. Par défaut: 'primary fadein'
scrollBtnClass (string)
optional
- Classe CSS de l'élément bouton. Par défaut: 'btn-gototop'
scrollTop (number)
optional
- Décalage de défilement en pixels avant que le bouton devienne visible. Par défaut: 100

Header - En-tête de contenu HTML5

macro @cHeader

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Navigation principale

macro @cMainNav

Exemple

Menu principal

Menu principal vertical

Extrait de code Macro

Paramètres

Entrée de menu

macro @cMainNavItem

Exemple

Extrait de code Macro

Paramètres

Menu utilisateur

macro @cMainNavUser

Exemple

Extrait de code Macro

Paramètres

Navigation rapide

macro @skipNav

Exemple

Extrait de code Macro

Paramètres

Bandeau principal

macro @cMainBanner

Exemple

City Services

Extrait de code Macro

Extrait de code HTML

Paramètres

Fil d'ariane - @cBreadCrumb

macro @cBreadCrumb

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Pied de page

macro @cFooter

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Pied de page principal

macro @cMainFooter

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Pied de page avec réseaux sociaux

macro @cMainFooterSocial

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Retour en haut de page

macro @cGoToTop

Exemple

Extrait de code Macro

Paramètres

Plan du site