How to not sort, or add custom sort to menu

support
1

Hi,

TLDR; I’m using a theme that sorts the menu items in the header alphabetically. I want it not to be sorted that way, but rather kept in the order from the hugo.toml file but can’t get it to work.

The long version:
I’m using the Terminal theme which sorts the menu header items alphabetically, and I’m trying to avoid that as I would rather keep the order from the hugo.toml file.

The hopefully relevant bits from hugo.toml are these:

[params]
  # if you set this to 0, only submenu trigger will be visible
  showMenuItems = 3

  # show selector to switch language
  showLanguageSelector = false
(...)
[languages]
  [languages.en]
    languageName = "English"

    [languages.en.params]
      subtitle = "A simple, retro theme for Hugo"
      (...)

      [languages.en.menu]
        [[languages.en.menu.main]]
          identifier = "overview"
          name = "overview"
          url = "/overview/"
        [[languages.en.menu.main]]
          identifier = "about"
          name = "about"
          url = "/about/"
        [[languages.en.menu.main]]
          identifier = "highlights"
          name = "highlights"
          url = "/highlights/"

Then in menu.html the menu items are iterated over, showing a max number of “showMenuItems” which is 3 in this case, remaining menu items are placed in a drop-down menu:

    {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
      {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
        {{ if not .HasChildren }}
          <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
        {{ end }}
      {{ end }}

The result is a menu with this ordering: about highlights overview
while I want it to be overview about highlights

The “identifier” field does not seem to be used so I’ve tried to use it for sorting by changing the values to 1, 2 and 3, but I guess I am too new and struggle with the syntax because the project doesn’t compile.

Is there a way to have these menu items in the order I add them in hugo.toml and not sorted alphabetically? If the same can be achieved by adding a “sortorder” field or similar to the menu elements, that is fine

2

No.

That’s what the weight field is for.

Comments:

  1. There’s no need to add an identifier field if the name is not duplicated within a given menu.

  2. For internal links specify pageRef instead of urlin the menu definition.

    [[languages.en.menu.main]]
  name = "overview"
  pageRef = "/overview"
  weight = 10
[[languages.en.menu.main]]
  name = "about"
  pageRef = "/about"
  weight = 20
1 Like
3

Oh my goodness, I almost feel silly for asking. I’m not going to share how long I’ve spent on this, pouring over the documentation and trying to code up solutions on my own, and it was this simple. For some reason, I can’t remember ever coming across the weight field, but it works perfectly, thank you very much!

1 Like
4

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