How to Add Menu Items to Your Hugo Site

To add menu items to your Hugo site, you’ll need to modify your site’s configuration file and the front matter of your content files. Here’s how you can do it:

Step 1: Update the Configuration File

Edit your site’s configuration file (config.toml, config.yaml, or config.json). I’ll use config.toml as an example:

# config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Hugo Site"
theme = "your-theme"

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1

  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 2

  [[menu.main]]
    identifier = "blog"
    name = "Blog"
    url = "/posts/"
    weight = 3
  • identifier: Unique identifier for the menu item.
  • name: Display name of the menu item.
  • url: URL or path to the page.
  • weight: Determines the order of the menu items (lower weights appear first).

Step 2: Update the Front Matter of Content Files

Add the menu definition to the front matter of your content files. For example, in a markdown file:

---
title: "About Me"
date: 2025-02-17
menu: 
  main:
    name: "About"
    weight: 2
---

This way, you can also define menu items directly in your content files.

Step 3: Customize the Theme (if Necessary)

Ensure that your theme supports menus. Check your theme’s documentation or look for a menu definition in the theme’s layout files. For example, you might find a file like layouts/partials/menu.html that defines how menus are rendered.

Here’s an example of how to include a menu in your layout:

<!-- layouts/partials/menu.html -->
<ul>
  {{ range .Site.Menus.main }}
    <li>
      <a href="{{ .URL }}">{{ .Name }}</a>
    </li>
  {{ end }}
</ul>

Step 4: Build and Serve Your Site

Rebuild your site to see the changes:

hugo

Serve your site locally to test the menu items:

hugo server

Example Configuration

Here’s a complete example of a config.toml file with a menu configuration:

# config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Hugo Site"
theme = "your-theme"

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1

  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 2

  [[menu.main]]
    identifier = "blog"
    name = "Blog"
    url = "/posts/"
    weight = 3

Conclusion

With these steps, you should be able to add and customize menu items on your Hugo site. By editing the configuration file and leveraging front matter, you can efficiently manage your site’s navigation.

Chuck Norris Joke:
When Chuck Norris adds a menu item to Hugo, it doesn’t just appear in the navigation. It becomes the navigation.

Related Posts