BHDicaire

Footer

Layout

The footer is the single strip at the bottom of every page: the copyright span, a short row of information links, and the GitHub and LinkedIn icons. The links come from shared data, with per-site exclusions for small differences.

This page’s own footer is the live component. The brand site uses the same footer as the main site, except it excludes the Colophon link.

When to use#

  • Every page, automatically: layouts/_default/baseof.html renders the partial once, and pages never include their own
  • Site-information links only: legal, sitemap, colophon; the footer is a production information strip, not a second navigation
  • Use data/footer.yml as the shared owner for links and social profiles
  • Use params.footer.excludeLinks for per-site omissions, such as omitting Colophon from the brand site

Implementation#

{{ partial "footer.html" . }}
params:
  footer:
    excludeLinks:
      - colophon
<footer class="footer-shell">
  <div class="footer-inner">
    <span class="footer-copyright">© Benoît H. Dicaire 1989–2026</span>
    <nav class="footer-nav" aria-label="Site information">
      <a class="footer-link" href="/en/legal/">Legal</a>
      <a class="footer-link" href="/en/sitemap/">Sitemap</a>
    </nav>
    <nav class="footer-social" aria-label="Social profiles">
      <a class="footer-social-link" href="https://github.com/bhdicaire" aria-label="GitHub" rel="me">
        <svg viewBox="0 0 24 24" aria-hidden="true">…</svg>
      </a>
    </nav>
  </div>
</footer>

The Hugo partial is layouts/partials/footer.html, called once from layouts/_default/baseof.html. It reads the link list from .Site.Params.footer.links and falls back to the shared hugo.Data.footer.links in data/footer.yml; each entry resolves its label and URL by the page’s language, with the entry key as the label fallback and the English URL as the URL fallback. The partial filters any key listed in params.footer.excludeLinks, then renders the shared social profiles from data/footer.yml unless params.footer.showSocial is false. There is no JavaScript and no separate CSS file; styling is the .footer-* rules in assets/css/site.css.

Options#

OptionPurpose
params.footer.linksPer-site link list, each entry a key plus label and url keyed by language
params.footer.excludeLinksPer-site list of shared link keys to omit, such as colophon on the brand site
params.footer.showSocialTurns the social icon row off; defaults to on
data/footer.ymlShared fallback — the default link list and the social profiles the icon row draws from

Interface manifest

Kind
Component
Category
Layout
Status
Implemented
Implementation
Partial:layouts/partials/footer.htmlData:data/footer.ymlCSS:assets/css/site.cssi18n:footerSiteInformationfooterSocialProfilesConfiguration:config/brand/hugo.yml

Accessibility#

  • The component is a native <footer> at the top level of the page, so assistive technology exposes it as the contentinfo landmark
  • The information links and the social icons sit in two separate <nav> landmarks, localized through the footerSiteInformation and footerSocialProfiles i18n keys
  • The icon-only social links each carry an aria-label (“GitHub”, “LinkedIn”) plus rel="me", and their SVGs are aria-hidden="true"; keyboard users Tab through every footer link and Enter follows one
  • Avoid adding an icon-only link without an aria-label — the SVG is hidden from assistive technology, so the link would have no accessible name