Menu Highlighting

support
1

Hey,
I’m new to Hugo.
I’m trying to keep the current page/section highlighted in the top menu.

I’ve tried the solutions suggested

  1. here

  2. here

  3. and here from stackoverflow :
    questions/48589485/highlighting-currentmenuitem-in-a-hugo-menu-that-is-defined-in-config-file

Then in /layouts/partials/menu.html I have tried the solutions suggested in the above links:

<!-- @ian copied this from:-->
<!-- https://stackoverflow.com/questions/48589485/highlighting-currentmenuitem-in-a-hugo-menu-that-is-defined-in-config-file -->
{{ $currentPage := . }}
{{ range .Site.Menus.main }}

    {{ $menu_item_url := .URL | relLangURL }}
    {{ $page_url:= $currentPage.RelPermalink | relLangURL }}

    {{ if eq $menu_item_url $page_url }}
        {{/* the menu item links to the current page (with relLangURL) */}}
    {{ end }}

{{ end }}

<!-- @ian copied this from:-->
<!-- https://discourse.gohugo.io/t/highlight-current-menu-item-config-toml/22723 -->

{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li>
    <a href="{{ .URL }}" 
        {{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
        class="active"
        {{ end }}
        {{ .Name }}</a>
</li>
{{ end }}
2

See https://github.com/gohugoio/hugo/issues/9150#issuecomment-965798975

3

Ok,
I change my config to be:

[[menu.primary]]
    name = "Home"
    pageref = "/"
    weight = 1
[[menu.primary]]
    name = "About"
    pageref = "/about/about/"
    weight = 2

Then inside /layouts/partials/menu.html

{{ $currentPage := . }}

{{ range .Site.Menus.main }}

<li class='menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} current-menu-item{{end}}'>

<a title="{{ .Name }}" href="{{ .pageref }}">{{ .Name }}</a>

</li>

{{ end }}

My menus stopped working completely?

4

In site configuration you defined a menu named “primary”.

But in your partial you are ranging through a menu named “main”.

Which is it?

5

Thanks Hugo.
Changed them both do main. Didn’t seem to make a difference.

6

Can you share your repository?

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

7

Its a private repository. I can add you?

8

Sure.

9

Done!
Thanks Jo.

10

1) In your site configuration, you have placed sectionPageMenu = "Main" within the [params] table, so it is ignored. If you want to enable this feature, move that line into the root table (i.e., above all other tables).

2) When you specify pageref in a menu entry in your site configuration, it needs to match a page. When specifying a pageref for content/About/About.md, any of these will work:

pageref = "/About/about.md"
pageref = "/About/about"
pageref = "About/about.md"
pageref = "About/about"

What you currently have does not work because of the trailing slash:

pageref = "/about/about/"

3) Using uppercase characters in file and directory names is generally a bad idea. Use lowercase characters, and be consistent.

4) The the hugo-tanka theme ranges through the “primary” menu in its header:
https://github.com/nanxstats/hugo-tanka/blob/master/layouts/partials/header.html#L13

If you want to display that menu, modify the menu entries in your site configuration, change [[menu.main]] to [[menu.primary]] for all menu entries.

Or, if you want to use the “Section Menu for Lazy Bloggers”, make the change noted in #1 above, and change the menu name: sectionPagesMenu = "primary"

5) You created two templates in layouts/partials/ but these are never called, which is good thing because both are broken.

  • In layouts/partials/menu.html you tried to “comment out” a lot of template code by wrapping it within HTML comment tags (<!-- -->). That doesn’t do what you think it does. Use Go template comments instead.
  • In layouts/partials/sidebar.html you have a complete HTML page (DOCTYPE, <html>, <head>, and <body> elements. No. A partial is a… partial.

I know your question was about highlighting active menu entries, but with the current state of your project, I really have no idea what you want.

  • Do you want to use the header menu provided by theme, or write your own?
  • Do you want menu entries determined automatically with the “Section Menu for Lazy Bloggers” feature, or do you want to manually define them in site configuration?
  • Do you want the menu named “main” or “primary”?
11

Thank Joe, for taking the time to look over my, admittedly naive code.
I answer to your questions:

Use the themes for now.

Sections menu should be enough for now.

No preference.

12

Ok,
I’ve made some additional changes:

  • moved the "sectionPagesMenu = “primary” above the [params] in config.
  • I went for the ‘lazy bloggers menu’ and (thanks to you) got it working.
13

@jmooring How do you call a template?

Blockquote 5) You created two templates in layouts/partials/ but these are never called,

14

Ok,
I got it working.

This code underlines the menu item:
(From layouts/Partials/header.html)

        {{ if or ($.IsMenuCurrent "primary" .) (eq $ .Name ) }}
         <u>
          {{else}}
         </u>
        {{ end }}