30.7 Multiple Menus: main, footer, sidebar

Right, let’s talk about menus. Not the laminated kind you get at a diner, but the ones that hold your entire website together. You’ve got your main nav, your footer, and that sneaky sidebar. They’re not just different places to put links; they serve fundamentally different purposes for your users. Getting this wrong is like putting the silverware drawer in the bathroom—sure, it’s in the house, but good luck finding it when you need it.

30.6 Active State Highlighting in Menus

Right, let’s talk about making sure your user isn’t lost. The single most important job of a navigation menu is to answer the silent, desperate question every user has: “Where the hell am I?” Active state highlighting is how you answer that question. It’s the digital equivalent of a “You Are Here” star on a mall map, and if you screw it up, your user is going to the food court out of sheer frustration, never to return to your website.

30.5 Rendering Menus in Templates: .Site.Menus

Alright, let’s talk about Hugo’s menu system in templates. This is where the rubber meets the road, where your beautifully defined menus in config.toml finally get to show off on the actual website. We’ll be using .Site.Menus—your gateway to all the menu magic. Think of .Site.Menus as a big dictionary (a map, in Go parlance) that Hugo plops into your template. Each key in this map is the name of a menu you defined (like "main" or "footer"), and the value is a slice (an array) of menu entries. Your job is to range over that slice and turn it into HTML. It’s shockingly straightforward once you get the hang of it.

30.4 Nested Menus: Parent and Child Entries

Right, nested menus. This is where we go from “handy navigation” to “full-on application architecture.” Done well, it’s a thing of beauty and usability. Done poorly, and you’ve built a Russian nesting doll of user frustration. My goal is to make sure you’re in the first camp. The core idea is simple: a parent menu entry doesn’t link to a page itself, but instead, when you hover or click it, it reveals a child menu—a sub-list of more specific options. It’s the “just one more level” of web navigation. We use this for a reason: it helps users mentally categorize information without overwhelming them with fifty top-level links. Think of it as the difference between a messy desk and one with a few well-labeled drawers.

30.3 Menu Entries: name, url, weight, identifier, parent

Right, let’s talk about the four horsemen of the menu-pocalypse: name, url, weight, identifier, and parent. These are the fields you’ll be slapping onto every menu entry in your config.toml (or yaml, or json—I don’t judge your life choices). They seem simple, but Hugo, in its infinite wisdom, gives them just enough rope to hang yourself with. I’m here to cut you down. Think of a menu entry as a way to tell Hugo: “Hey, for this page (or even for a custom link I’m inventing out of thin air), I want you to put a thing in that navigation bar over there.” These five properties are how you tell Hugo what that thing is, where it goes, what it’s called, and crucially, where it lives in the hierarchy. Get them wrong, and your menu will look like a map drawn by a caffeine-addled squirrel.

30.2 Adding Pages to Menus via Front Matter

Right, let’s talk about getting your pages onto the damn menu. You’ve built a page, you’re proud of it, and now you want people to actually find it. In static site generators, menus aren’t magical, sentient beings that automatically discover your content. You have to explicitly tell the system, “Hey, put this thing here.” The most elegant, keep-it-all-together way to do this is directly in the page’s front matter. Think of front matter as the instruction sheet you paperclip to a document before filing it. It’s the metadata for your page, written in YAML (or TOML, or JSON), sitting right at the top between two sets of triple dashes (---). This is where you declare, “I am a page that belongs in the main navigation,” and you do it by defining a menu property.

30.1 Defining Menus in Configuration

Right, let’s talk menus. Not the laminated kind you get at a diner, but the ones that hold your entire application together. This is where we move from building individual pages to building a system that users can actually navigate. Drupal’s menu system is brilliantly powerful, which is a polite way of saying it can be a bit of a labyrinth if you don’t know what you’re doing. We’re going to define them in our module’s .yml files, because that’s how we roll in the land of serious Drupal development.

— joke —

...