A static navigation can work well for simple hugo websites. This is a naviagtion that doesn’t look to any Hugo internals during the build process, but instead you jsut define static navigation links.

  1. In your Hugo project, create a new folder called “layouts” if it doesn’t already exist.

  2. In the “layouts” folder, create a new file called “partials” and add a new file inside the “partials” folder called “header.html”.

  3. In the “header.html” file, create the HTML structure for your navigation menu. For example:

  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  1. In the theme templates for your Hugo site (e.g. “baseof.html”, “index.html”), include the “header.html” partial at the top of the file, using the partial function:
  {{ partial "header.html" . }}

One thing to note here is the use of the . after the parial name. This is a refercence to the current context, and we are passing that context into the partial function.

This means that partials generally don’t have access to the global context in a way that your layout template would. This means that in your partial you wouldn’t be able to access .Site variables using the normal syntax.

However, you can use $ which is the default way to refernce the global context from anywhere in a partial - assuming $ has not been reassigned.

  <nav>
    <ul>
      <li>
      <a href="/tags/{{ . | urlize }}">{{ . }}</a>
              - {{ $.Site.Title }}
      </li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>