Simplify your navigation, and learn some Hugo magic to make it easier to maintain.
Separating navigation from the layout
Using Hugo’s inbuilt navigation system
Basic Hugo partial usage
Let’s hone in on the navigation and sprinkle some Hugo magic to make it easier to maintain. The navigation in this template can go up to three levels deep. Hugo can handle this, but for the purposes of this tutorial, we’re going to simplify it down to a single level.
Hugo has built-in menu support to help us separate the content structure of the navigation from the templating. Open
/hugo_src/config.toml and add the following TOML to the bottom of it:
This sets up the basic structure for our menu with a
url, and handles the ordering with the
weight field. Coding Concepts has a great example of how to handle nested menus if you want to go the extra mile.
With the content structure in place, we can use Hugo’s templating language to iterate over the main menu to build the navigation. We’ll create a partial for our navigation logic so we don’t overcomplicate our layout. Create a
partials directory inside
layouts and create
/hugo_src/layouts/partials/nav.html with the following:
The majority of this file is the Bootstrap HTML from the original template. Where things get interesting from a Hugo point of view is iterating over the menu items:
We iterate over each item using the range function, checking if the current page’s relative permalink is the same as that menu item; if it is we add an active class. Then we output an
<a> tag with the URL and name. Now we can update the menu in our
config.toml file and be sure each menu item will be rendered consistently.
Finally, we need to tell our layout to use our new
nav.html partial. Open up
/hugo_src/layouts/baseof.html and replace the entire
<div id="navbar"> (it ends just before
</header>) with this:
Ideally we’d make similar changes to the footer to make it easier to maintain. In the interest of keeping this tutorial shorter, I’m going to leave that as homework for you.