How to eliminate recursive links in your Hugo website’s navigation

What’s the point of a link that doesn’t take you anywhere new?

Ron Erdos
Updated September 28, 2020

I used to have recursive links in my site navigation.

On my homepage, for example, if you clicked the header logo, you didn’t go anywhere new, you just triggered an unnecessary page refresh.

Similarly, on my About page, the footer contained a link to that same About page.

Nowadays, I have eliminated all such recursive navigation links on this site.

On my homepage, the header logo is no longer a link. It’s just a logo.

And on my About page, there’s no more recursive footer link.

Note that my header logo is a link to the homepage on all non-homepage pages.

And my footer does link to the About page on all non-About pages. I only removed links where they were recursive.

Is this good UX?

Now, one could argue that this is not good UX, and that may be true.

However, I believe eliminating recursive links helps orient users within the site—why is something a link when it doesn’t take you anywhere new? Note that I don’t remove the relevant text or image, just the link itself.

Anyway, here’s how to remove recursive links in the navigation of your own Hugo site.

I’ll cover two scenarios: using an inline SVG logo, as I do on this site; and using a traditional PNG image logo.

Inline SVG logos

Here’s the code I use in my site header partial:

{{ if .IsHome }}
    {{ partial "logo.html" . }}
{{ else }}
    <a href="/">{{ partial "logo.html" . }}</a>
{{ end }}

Let’s step through it:

{{ if .IsHome }} Here we tell Hugo what to do when generating the homepage. Note that .IsHome is a Hugo page variable that comes with the framework, you don’t have to create it.

{{ partial "logo.html" . }} On the homepage, render the logo, using a partial called logo.html. In this partial, I have the SVG code for my MoonBooth logo you see at the top of this page.

{{ else }} For any page but the homepage …

<a href="/">{{ partial "logo.html" . }}</a> Render the logo and make it a link to the homepage.

{{ end }} Close the if statement.

PNG image logos

Let’s say instead of an inline SVG logo partial, you’re using a traditional .png image file for your logo. Here’s how the code above would look:

{{ if .IsHome }}
    <img src="logo.png">`
{{ else }}
    <a href="/"><img src="logo.png"></a>
{{ end }}

The code logic is the same as in the inline SVG version above; I’ve just swapped the logo.html partial for a direct image link.

I’ve omitted alt text, height and width attributes from the img to keep the example code simple, but you would obviously want to add these in production.

I use a simple, two-link footer for navigation on this site, but the principles I’ll discuss apply to more complex navigation schemes too, including dropdown menus.

I’ll cover two different scenarios below.

For pages

For links to pages such as your About page, your code might look something like this:

{{ if eq .Path "about.md" }}
    <strong>About</strong>
{{ else }}
    <a href="/about/">About</a>
{{ end }}

Let’s walk through it:

{{ if eq .Path "about.md" }} There’s a bit to unpack here. First, you have to know that eq stands for “equals”, and that Hugo, based as it is on Go's html/template package, uses it instead of the equals sign.
Second, the eq comes before the two things we are comparing, like this: if eq thing_1 thing_2. Kind of how Yoda talks.
Third, .Path appears to be a form of a built-in Hugo file variable. It checks for the relative path of the Markdown file (e.g. about.md) in your Hugo repo, relative to the /content/ folder. Because I keep my about.md file in the root of my /content/ folder, I simply write "about.md".
All up, this line of code is saying if the page we’re on is the About page, then …

<strong>About</strong> … show the word About in bold text (no link).

{{ else }} However, if the page we’re on is not the About page …

<a href="/about/">About</a> … then link to the damned About page already!

{{ end }} … and be on your way.

You can see an example on this site. Scroll to the bottom of this page; you’ll see a link to the About page in the footer. However, if you visit the About page and scroll down to the footer, you’ll see that the link has been changed into plain bold text. That way, my About page does not contain a recursive link.

For section homepages

What if you want to banish recursive links to section homepages? (An example of a section homepage is my Hugo tutorials list.) That’s not a Markdown file in my repo, it’s a folder. So I can’t use .Path to refer to it, as I did in the About page example above.

Here’s what to do in that case:

{{ if and (eq .Section "planets") (.IsNode) }}
    <strong>Planets</strong>
{{ else }}
    <a href="/planets/">Planets</a>
{{ end }}

Let’s walk through the code:

{{ if and (eq .Section "planets") (.IsNode) }} This first line is an “if both conditions are true” check. The syntax, for the uninitiated, is if and (condition 1) (condition 2). This syntax is probably a little different to other programming languages you may have used.
So we’ll be checking two conditions. The first is that the section folder is called planets. Note that Hugo sections are exclusively defined by the names of the folders in your /content/ directory—there is no way to override this.
The second condition we’ll be checking for is that the page is a node, a.k.a folder (.IsNode). We want both conditions to be true because we don’t want all pages in the planets section, nor do we want all nodes / folders in our site. We just want the planets folder, which is what I call the section homepage.
So if both conditions are true, then …

<strong>Planets</strong> … show the word Planets in bold text (no link).

{{ else }} However, if the page we’re on is not the Planets section homepage …

<a href="/planets/">Planets</a> … then link to the damned Planets section homepage already!

{{ end }} … and be on your way.

What do you think?

What do you think about removing recursive navigation links? It’s likely a consensus-free topic. I’d be keen to hear your thoughts!