Today I learned: you need to add pageRef to your hugo menus if you want to style the current/trail menu item

support
1

Just a quick reminder for everyone who wants to add an active class to the current menu item. Maybe you want to use IsMenuCurrent or HasMenuCurrent to check for the currently active (or in case of a nested menu, current trail) menu item.

Thanks to this guy’s post: Menus in Hugo | Harry Cresswell you need to add the PageRef property to your hugo.toml menu configuration. If you don’t have this property, you won’t see any of the active classes that you may try to add with the methods above.

The weird thing about PageRef is, it tells my “The use case for this method is rare” and twice (!!) “In almost also scenarios you should use the URL method instead.”

2

You are conflating the pageRef menu entry property and the PageRef menu entry method.

Additionally…

  1. Every example in the documentation sets the pageRef menu property, not the url menu property
  2. The documentation for the url menu property states “Use this for external destinations only”

I have no idea why some theme authors continue to provide menu configuration examples that include the url menu property.

1 Like
3

The docs are extremly confusing. Who came up with the idea that something PascalCase has a different meaning than something with camelCase?

The more I think about hugo menus, the better I feel like just using a custom /data/menu.toml or just write the entire menu in a partial myself.

4

I asked Gemini…

This type of naming convention, where a method and a property share the same name but differ in case, can be found in various programming languages, particularly those that are case-sensitive. This pattern is often used to create a clear symmetry between an action (the method) and a state (the property).

The Pattern

Consider a class named User. The pattern would look something like this:

  • A property named name (lowercase) that holds the user’s name. This property provides direct access to the data.
  • A method named Name (uppercase) that performs an action related to the user’s name, such as formatting it, validating it, or retrieving it from a database. This method encapsulates logic and behavior.

Why Use This?

This pattern can improve code readability by creating an intuitive link between the data and the operations performed on that data. It offers a clear distinction between a simple data access and a more complex action. For example, in a programming language like C#, this is a common pattern. The property user.Name would simply get or set a value, while the method user.Name() might perform a complex calculation or format the name string.

5

Even if Gemini can explain it nicely, I find that approach confusing. It requires far too much cognitive work imo. Not to mention that English is not exactly a language where upper/lower case are used extensively (as opposed to German, for example).

6

front matter:

---
title: Foo
---

template

{{ .Title }}

site config

title: Foo

template

{{ .Site.Title }}

I’m sorry if you find this difficult to comprehend.

7

I don’t find it a particularly good choice, because it increases the cognitive load. It’s a quirk, like the pluralisation stuff for taxonomies (which makes sense for exactly one language). And the advantages of Hugo far outweigh these quirks.

8

For me, using pageRef in menus and URL in menu templates was more confusing. I wish .Permalink or .RelPermalink could extend to menus.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.