Creating a Hugo Theme - Part 5: Header and Footer

December 20, 2024 · 3 min read

In this post, we’ll focus on the header and footer. The header primarily consists of navigation links and is always visible, so careful attention to design and accessibility is crucial. On mobile devices, menus often collapse due to limited space, which must also be considered.

The footer, on the other hand, typically contains site information and social links. Let’s first take a look at the final result:

Desktop Mobile

The header, as shown in the images above, includes mobile-friendly navigation and highlights the current page. Only the menu.html file has been modified.

menu.html

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}
  <input type="checkbox" id="menu-toggle" class="hidden peer" />
    <label for="menu-toggle" class="block sm:hidden p-2 text-dark2-color">
    <i class="fa-solid fa-bars text-dark2-color"></i>
  </label>

  <nav class="hidden peer-checked:block absolute top-16 left-0 w-full bg-white sm:bg-transparent shadow-md sm:static sm:shadow-none sm:block">
    <ul class="flex text-sm items-center sm:justify-end flex-col gap-y-2 p-4 sm:flex-row sm:gap-x-2 sm:p-0 sm:text-dark2-color uppercase font-semibold">
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
    </ul>
  </nav>
{{- end }}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- $total := len .menuEntries }}
  {{- range $index, $menu := .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if or ($page.IsMenuCurrent .Menu .) (eq $page.Section .Identifier) }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-selected" "true") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}

    <li>
      <a
        class="aria-selected:text-primary"
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ $name }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
    {{- if ne (add $index 1) $total }}
      <li class="hidden sm:block">&middot;</li>
    {{- end }}
  {{- end }}
{{- end }}

The menu.html file may seem complex, but we only modified the necessary parts:

Added mobile/desktop menu handling.
Highlighted the current page in the top menu.

Since TailwindCSS doesn’t natively support aria-current, we used aria-selected instead. Also, the ($page.IsMenuCurrent .Menu .) condition didn’t work as expected, so adjustments were made to ensure functionality.

The footer includes the site’s logo, description, and social links. Social links are generated dynamically based on entries in the config.toml file.

[params.socials]
  [params.socials.github]
  link = "https://github.com"
  [params.socials.facebook]
  link = "https://facebook.com"
  [params.socials.instagram]
  link = "https://instagram.com"
  [params.socials.x-twitter]
  link = "https://x.com"

If a key is missing or its link value is empty, the corresponding icon won’t appear. As you can see, the params.socials.[name] keys match Font Awesome icon names. This allows for seamless addition of new social links.

footer.html

<div class="flex flex-col items-center gap-y-4 md:max-w-7xl w-full mx-auto p-6 py-12">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
    <div class="flex flex-col gap-y-2 items-center md:items-start w-full">
      <div class="flex items-center gap-x-1">
        <i class="text-xl fa-solid fa-gear text-primary/80 "></i>
        <span class="uppercase text-2xl font-extrabold text-dark2-color">{{ site.Title }}</span>
      </div>
      <span class="text-dark2-color text-sm prose">
        Crafting Precision, One Gear at a Time - Time is money, friend!
      </span>
    </div>
    <div class="flex gap-4 items-center justify-center">
      {{ range $name, $social := site.Params.socials }}
        {{ if $social.link}}
          <a target="_blank" href="{{ $social.link}}" rel="noopener">
            <i class="text-3xl text-dark2-color fa-brands fa-square-{{ $name }}"></i>
          </a>
        {{ end }}
      {{ end }}
    </div>
  </div>
  <p class="text-dark2-color text-sm">Copyright {{ now.Year }}. All rights reserved.</p>
</div>