BjFooter

Pied de page React : zone supérieure optionnelle dans un conteneur, puis bloc principal avec conteneur pour le bas de page.

Utilisation

import { BjFooter } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjFooter
      top={<p className="bj-text-sm">Liens utiles</p>}
      bottom={
        <ul className="bj-footer__bottom-list">
          <li>
            <a className="bj-footer__bottom-link" href="/mentions-legales">
              Mentions légales
            </a>
          </li>
          <li>
            <a className="bj-footer__bottom-link" href="/accessibilite">
              Accessibilité
            </a>
          </li>
        </ul>
      }
    />
  )
}

Aperçu

Liens utiles

© République du Bénin

bottom seul (sans top)

Si top est absent, la bande bj-footer__top n’est pas rendue.

import { BjFooter } from '@flrxnt/dsbj/react'

export function BottomOnly() {
  return (
    <BjFooter
      bottom={<p className="bj-text-sm">© 2025 République du Bénin</p>}
    />
  )
}

top et bottom

Bande utile pour liens secondaires ou rappels.

import { BjFooter } from '@flrxnt/dsbj/react'

export function TopAndBottom() {
  return (
    <BjFooter
      top={
        <ul className="bj-footer__bottom-list">
          <li><a className="bj-footer__bottom-link" href="/plan">Plan du site</a></li>
          <li><a className="bj-footer__bottom-link" href="/faq">FAQ</a></li>
        </ul>
      }
      bottom={
        <p className="bj-text-sm">Service public — Tous droits réservés</p>
      }
    />
  )
}

bottom et children

children s’affiche après bottom dans le même conteneur du bas.

import { BjFooter } from '@flrxnt/dsbj/react'

export function BottomPlusChildren() {
  return (
    <BjFooter
      bottom={
        <ul className="bj-footer__bottom-list">
          <li><a className="bj-footer__bottom-link" href="/legal">Mentions</a></li>
        </ul>
      }
    >
      <p className="bj-text-sm" style={{ marginTop: '1rem' }}>
        Version 2.1 — Dernière mise à jour : mars 2025
      </p>
    </BjFooter>
  )
}

Composition complète

Les trois zones : bande haute, contenu principal, contenu additionnel.

import { BjFooter } from '@flrxnt/dsbj/react'

export function FullFooter() {
  return (
    <BjFooter
      top={<p className="bj-text-sm">Contacts institutionnels</p>}
      bottom={<p>© République du Bénin</p>}
    >
      <nav aria-label="Liens pied de page">
        <a href="/accessibilite">Accessibilité : partiellement conforme</a>
      </nav>
    </BjFooter>
  )
}

Attributs natifs du footer

id, className, role, data-* et autres attributs HTML du <footer> sont fusionnés sur la racine.

import { BjFooter } from '@flrxnt/dsbj/react'

export function WithNativeAttrs() {
  return (
    <BjFooter
      id="site-footer"
      className="app-footer"
      role="contentinfo"
      data-testid="footer"
      bottom={<p>© Bénin</p>}
    />
  )
}

Props

PropDescription
topContenu de la bande supérieure (bj-footer__top), optionnel.
bottomContenu principal du bas (copyright, liens légaux, etc.).
childrenContenu additionnel rendu dans le conteneur du bas après bottom.
…restAttributs natifs du footer et className fusionnés sur l’élément racine.