• Go to main content
Thème Paris.fr

Thème Paris.fr

    • Quick start
    • Configurer
    • Versions
    • Mettre à jour le thème
    • Plugins
    • Support
    • Grille
    • Ombres
    • Navigation
    • Couleurs
    • Typographie
    • Iconographie
  • Composants
    • Pages
    • Code
    • Mail
    • Connect

Thème Paris.fr

Thème Paris.fr

  1. Home
  2. Styles
  3. Navigation
Chargement...

Navigation principale

macro @cMainNav

Generates a main navigation bar with optional search, login, and sidebar features.

Exemple

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

Menu principal

Menu Principal

Menu principal vertical

Menu Principal Vertical 

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

Paramètres

Generates the main site navigation bar with logo, menu items, optional search field, login button, and sidebar mode support.

  • title (string)
    required
    - Site title displayed in the navbar. Default: favourite
  • logoImg (string)
    optional
    - URL of the logo image. Default: ''
  • href (string)
    optional
    - URL linked to the logo/title. Default: '.'
  • hasMenu (boolean)
    optional
    - If true, displays the site menu. Default: hasDefaultMenu?boolean
  • hasUserThemeSwitch (boolean)
    optional
    - If true, displays a light/dark theme toggle. Default: hasUserThemeSwitch?boolean
  • hasNestedMenu (boolean)
    optional
    - If true, renders nested content as additional menu items. Default: true
  • isSidebar (boolean)
    optional
    - If true, renders a vertical sidebar navigation. Default: isMainSidebarMenu?boolean
  • isSidebarCollapsible (boolean)
    optional
    - If true, the sidebar menu can be collapsed. Default: isMainSidebarMenuCollapse?boolean
  • sidebarMenuClass (string)
    optional
    - Additional CSS class for the sidebar menu. Default: ''
  • isOnlyHome (boolean)
    optional
    - If true, banner is only shown on the home page. Default: isBannerOnlyHome
  • showDefaultMenu (boolean)
    optional
    - If true, renders the default page menu. Default: true
  • hasSearchMenu (boolean)
    optional
    - If true, adds a search feature to the menu. Default: false
  • typeSearch (string)
    optional
    - Search display type: 'field' for an input form, 'icon' for a search link. Default: 'field'
  • searchUrl (string)
    optional
    - URL for the search icon link. Default: urlDefaultSearch
  • searchAction (string)
    optional
    - Form action URL when typeSearch is 'field'. Default: 'jsp/site/Portal.jsp'
  • searchSolr (boolean)
    optional
    - If true, searches via Solr instead of the default engine. Default: false
  • searchParams (string)
    optional
    - Additional hidden fields for the search form. Default: ''
  • isFixed (boolean)
    optional
    - If true, the navbar is fixed at the top of the page. Default: isFixedMenu?boolean
  • hasLogin (boolean)
    optional
    - If true, displays a login button. Default: false
  • loginClass (string)
    optional
    - CSS class for the login button. Default: ''
  • mainClass (string)
    optional
    - CSS class for the main element. Default: ''
  • id (string)
    optional
    - Unique identifier for the navbar. Default: ''
  • class (string)
    optional
    - Additional CSS class(es) for the navbar. Default: ''
  • role (string)
    optional
    - ARIA role attribute for the navbar. Default: ''
  • params (string)
    optional
    - Additional HTML attributes for the navbar. Default: ''

Entrée de menu

macro @cMainNavItem

Generates a single navigation item (li element with an optional link) for use inside the main navigation bar.

Exemple

Main Navigation Item Example 

<@cMainNav hasMenu=false isSidebar=false isSidebarCollapsible=false title='Paris' hasLogin=false mainClass='h-50' params='style="position:static"'>
  <@cMainNavItem title='Prise en Main' url='jsp/site/Portal.jsp?page_id=7' />
  <@cMainNavItem title='Styles' url='jsp/site/Portal.jsp?page_id=48' />
  <@cMainNavItem title='Composants' url='jsp/site/Portal.jsp?page_id=6' />
  <@cMainNavItem title='Modèles' url='jsp/site/Portal.jsp?page_id=35' />
</@cMainNav>

Paramètres

Generates a single navigation item (li element with an optional link) for use inside the main navigation bar.

  • title (string)
    required
    - Label text for the navigation item
  • url (string)
    required
    - Destination URL. If empty, only nested content is rendered without a link wrapper
  • urlClass (string)
    optional
    - CSS class(es) for the anchor element. Default: ''
  • target (string)
    optional
    - Link target attribute ('_top', '_blank', '_parent'). Default: ''
  • role (string)
    optional
    - ARIA role for the link. Default: 'navitem'
  • showTitle (boolean)
    optional
    - If true, adds a title attribute with the label text. Default: false
  • id (string)
    optional
    - Unique identifier for the list item. Default: ''
  • class (string)
    optional
    - Additional CSS class(es) for the list item. Default: ''
  • params (string)
    optional
    - Additional HTML attributes for the list item. Default: ''

Menu utilisateur

macro @cMainNavUser

Generates the user authentication menu with login/register dropdown for anonymous users and account dashboard dropdown for connected users.

Exemple

Main Navigation User Example 

<@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

Generates the user authentication menu with login/register dropdown for anonymous users and account dashboard dropdown for connected users.

  • connected (boolean)
    required
    - Indicates whether a user session exists
  • userName (string)
    required
    - Display name of the connected user
  • urlConnect (string)
    required
    - URL for the login or logout action
  • btnToggle (boolean)
    optional
    - If true, opens the user menu in a dropdown. Default: true
  • userFullName (string)
    optional
    - Full name of the connected user. Default: ''
  • userEmail (string)
    optional
    - Email address of the connected user. Default: ''
  • userInitials (string)
    optional
    - Initials of the connected user for avatar display. Default: ''
  • hasIcon (boolean)
    optional
    - If true, displays a user icon. Default: false
  • title (string)
    optional
    - Accessible label for the connection button/icon. Default: ''
  • id (string)
    optional
    - Unique identifier for the menu item. Default: ''
  • class (string)
    optional
    - Additional CSS class(es) for the menu item. Default: ''
  • params (string)
    optional
    - Additional HTML attributes for the menu item. Default: ''

Navigation rapide

macro @skipNav

Generates an accessible skip navigation menu, allowing keyboard users to jump directly to the main content or the site menu.

Exemple

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

Paramètres

Generates an accessible skip navigation menu, allowing keyboard users to jump directly to the main content or the site menu.

Information

Pour faire apparaître le menu, utilisez les touches de navigation du clavier et naviguer jusqu'au menu du site.

  • target (string)
    optional
    - ID of the main content element to skip to. Default: 'main'
  • skipMenu (boolean)
    optional
    - If true, displays an additional link to skip to the site menu. Default: true

Bandeau principal

macro @cMainBanner

Generates a main banner section for the site, with optional background image, title, and home-only display mode.

Exemple

City S ervices

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


<div class="banner-wrapper is-fixed banner-lgbg-banner internal">
<div class="banner banner-lgbg-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 S ervices</h1>
</div>
</div>

Paramètres

Generates a main banner section for the site, with optional background image, title, and home-only display mode.

  • title (string)
    required
    - Banner title text. Default: 'Thème Paris.fr'
  • titleClass (string)
    optional
    - CSS class added to the banner title. Default: ''
  • onlyHome (boolean)
    required
    - If true, the banner is only displayed on the home page. Default: isBannerOnlyHome
  • imageSrc (string)
    required
    - Path to a background image covering the full banner area. Default: urlDefaultBannerImage
  • class (string)
    optional
    - Additional CSS class(es) for the banner. Default: ''
  • id (string)
    optional
    - Unique identifier for the banner element. Default: 'main-banner'
  • params (string)
    optional
    - Additional HTML attributes for the banner element. Default: ''

Fil d'ariane - @cBreadCrumb

macro @cBreadCrumb

Doc Bootstrap Fil d'ariane - @cBreadCrumb

Exemple

  1. Home
  2. Services
  3. Contact 

<@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

Generates a breadcrumb navigation trail for the current page, helping users navigate the site hierarchy.

  • home (string)
    required
    - Label for the home page link. Default: ''
  • items (list)
    required
    - List of breadcrumb items, each with 'title' and 'url' attributes. Default: ''
  • class (string)
    optional
    - Additional CSS class(es) for the breadcrumb nav. Default: ''
  • type (string)
    optional
    - If 'fluid', the breadcrumb spans the full page width. Default: ''
  • params (string)
    optional
    - Additional HTML attributes for the breadcrumb nav element. Default: ''

Pied de page principal

macro @cMainFooter

Generates the main site footer with navigation links, social media icons, and copyright information.

Exemple

Go to the site Paris.fr
My City Portal
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition généales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Cookies policy [New window]
Go to the site Paris.fr
City Services
  • FAQ
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition généales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Cookies policy [New window] 

<@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">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="Go to the site Paris.fr" >
<hr aria-hidden="true">
<span class="main-service-title">My City Portal</span>
</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">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="Go to the site Paris.fr" >
<hr aria-hidden="true">
<span class="main-service-title">City Services</span>
</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

Generates the main site footer with navigation links, social media icons, and copyright information.

  • title (string)
    required
    - Name of the digital service displayed in the footer. Default: mainSite
  • logoFooterImg (string)
    optional
    - URL de l'image à afficher dans le pied de page. Default: ''
    New
  • logoFooterAlt (string)
    optional
    - Texte alternatif pour l'image. Default: ''
    New
  • nested_pos (string)
    required
    - Position of nested content relative to the footer menu: 'before' or 'after'. Default: 'after'
  • params (string)
    optional
    - Additional HTML attributes for the footer element. Default: ''

Pied de page avec réseaux sociaux

macro @cMainFooterSocial

Generates the main site footer with social media buttons (Facebook, X, Instagram, LinkedIn) and navigation links, following the Paris.fr layout.

Exemple

City Portal
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition généales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Cookies policy [New window]

Follow us

  • Facebook
  • Bluesky
  • Instagram
  • LinkedIn

Get weekly news from your city on social’s network

My Service
  • FAQ
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition généales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Cookies policy [New window]

Follow us

  • Facebook
  • Bluesky
  • Instagram
  • LinkedIn

Get weekly news from your city on social’s network

<@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 hide-icon-target" href="https://www.paris.fr" target="_blank">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="">
<hr aria-hidden="true">
<span class="main-service-title">City Portal</span>
</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 hide-icon-target" href="https://www.paris.fr" target="_blank">
<img src="themes/skin/parisfr/images/footer-logo-paris.svg" class="logo" alt="">
<hr aria-hidden="true">
<span class="main-service-title">My Service</span>
</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

Generates the main site footer with social media buttons (Facebook, X, Instagram, LinkedIn) and navigation links, following the Paris.fr layout.

  • title (string)
    required
    - Name of the digital service displayed in the footer
  • nested_pos (string)
    optional
    - Position of nested content relative to the footer menu: 'before' or 'after'. Default: 'after'
  • logoFooterImg (string)
    optional
    - URL de l'image à afficher dans le pied de page. Default: ''
    New
  • logoFooterAlt (string)
    optional
    - Texte alternatif pour l'image. Default: ''
    New
  • socialNested (string)
    optional
    - Additional HTML content displayed above the social links section. Default: ''
  • align (string)
    optional
    - Flex alignment for the menu area ('around', 'between', 'start', 'end', 'evenly'). Default: 'around'
  • classColMain (string)
    optional
    - Bootstrap column class for the menu zone. Default: 'col-md-7'
  • classColSocial (string)
    optional
    - Bootstrap column class for the social zone. Default: 'col-md-5'
  • params (string)
    optional
    - Additional HTML attributes for the footer element. Default: ''

Retour en haut de page

macro @cGoToTop

Generates a "back to top" button that appears after scrolling down and smoothly scrolls the page back to the top when clicked.

Exemple

Go to top sample

Le bouton "Retour en haut de page" apparaît après avoir fait défiler la page vers le bas. En cliquant dessus, la page défile en douceur vers le haut.

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

<@cGoToTop />

Paramètres

Generates a "back to top" button that appears after scrolling down and smoothly scrolls the page back to the top when clicked.

  • scrollLabel (string)
    optional
    - Accessible label text for the button. Default: ''
  • scrollClass (string)
    optional
    - CSS class(es) for the scroll animation effect. Default: 'primary fadein'
  • scrollBtnClass (string)
    optional
    - CSS class for the button element. Default: 'btn-gototop'
  • scrollTop (number)
    optional
    - Scroll offset in pixels before the button becomes visible. Default: 100

Plan du site

Gestion du plan du site

Configurable en BO

Accéder aux propriétés du site ( menu "Administration du site / Propriétés du site" ou bouton ), onglet "Configuration du Thème Parisfr ".

Le bouton "Afficher / masquer le menu du plan du site" peremt de gérer l'apparition du lien du "Plan du site" dans le pied de page.

Information

Le plan du site par défaut est géré par une feuille de style XSL.

Il est possible de surcharger le plan du site en modifiant la XSL qui est téléchargeable depuis le BO du site, menu 'Charte / Gestion des feuilles de style XSL'.

Le fichier est téléchargé est nommé "site_map_theme.xsl". Vous pourrez le mettre à jour et le ré-uploader.

Thème Paris.fr
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition généales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Cookies policy [New window]

Follow us

  • Facebook
  • Bluesky
  • Instagram
  • LinkedIn

Get weekly news from your city on social’s network