Current navigation

support
1

Im wondering what, currently, is the best way to add an ‘active’ class to the main navigation. I have both archetypes and static pages. E.g.…

<li class="active"><a href="/blog/">Blog</a></li>
<li><a href="/about/">About</a></li>

I’ve found that i can do something like the following for the static pages, but i’m not figure out the archetypes.

<li {{ if eq "about" .Section }}class="active"{{ end }}><a href="/about/">About</a></li>
2

I’m doing something similar, so I’d also be interested in different approaches.

{{ $baseUrl := .Site.BaseUrl }}
{{ with (or .Params.menu "home") }}
  <ul class="menu">
  <li><a {{ if eq "home" . }}class="current"{{ end }} href="{{ $baseUrl }}/" title="">Home</a></li>
3

I try to move towards the built-in menu system for most of my navigation - using IsMenuCurrent and HasMenuCurrent for the “active” stuff.

IsMenuCurrent works fine in both cases (NOTE: this is in 0.13-DEV, these method weren’t implemented on Node in 0.12), and I wrote this “hack” to add support for HasMenuCurrent for sections, without having to add menu config to every page, see https://github.com/spf13/hugo/pull/779

I basically want “one loop” / one way to handle my menu builds, not a lot of if/else hacks.

4

Yeah i tried to use the built in menu stuff, but i still have the same fundamental problem: ‘active’ states work for archetypes but not static sections. Maybe i’m missing something:

menu:
  main:
      - Name: "Blog"
        Pre: "<li class='divider'></li>"
        Url: '/blog/'
        Weight: 1
      - Name: "About"
        Pre: "<li class='divider'></li>"
        Url: '/about/'
        Weight: 2
      - Name: "Culture"
        Pre: "<li class='divider'></li>"
        Url: '/culture/'
        Weight: 3
      - Name: "Careers"
        Pre: "<li class='divider'></li>"
        Url: '/careers/'
        Weight: 4

blog/careers being archetypes and about/culture being static pages.

<ul>
  {{ $currentNode := . }}
  {{ range .Site.Menus.main }}
    {{ .Pre }}
    <li class="{{if $currentNode.IsMenuCurrent "main" . }}active{{end}}">
      <a href="{{.Url}}">
        {{ .Name }}
      </a>
    </li>
  {{end}}
</ul>
5

And you use Hugo 0.13-DEV?

6 
$  hugo version
Hugo Static Site Generator v0.13-DEV buildDate: 2014-11-24T18:04:18-05:00
7

Hmm. Odd, cause it works for me …

Do you have a public project (on Github) that shows this issue (or can you put one out there)?

8

Created a pared down version here: https://github.com/blg002/hugo

10

I sent you a PR that illustrate a fix.

Menus for Pages (in contrast to Nodes) is configured in front matter.

11

Yeah that makes sense. Thanks!

12

Greetings!

I’m new to Hugo and I’m currently building my small company website. I have the exact problem as described here by Brad and I’d like very much to share fix you mentioned with us.

I also have main menu (named portal) defined in config, consisting of mostly static pages without archetype. For those pages I can not get highlighted menu. My code is here:

{{ range .Site.Menus.portal }}
                        <li><a href="{{ .Url }}" {{ if $currentNode.IsMenuCurrent "portal" . }}class="active-page"{{ end }}>{{ .Name }}</a></li>
{{ end }}

Highlight gets properly displayed only for blog, which also does not have any special archetype (for now), but it’s root page ( / ).

So, please, help and thanks in advance!

13

Hi, I am a new Hugo user, and I have the same problem. The home page and blog page get highlighted but a static page doesn’t get highlighted. Help appreciates

14

Ah - i worked it out - I had to remove the static page info from the config file and set menu main in the actual pae

15

Aha! Thank you. That was my missing piece. To be a bit more verbose:
site config.toml - removed the reference to static page completely
Then, in the front matter of the static page itself I added
menu = “main”

1 Like
16

Had the same problem - the “active” flag (IsMenuCurrent or HasMenuCurrent) was not working for nodes when declared in config.toml.
The solution was to declare it in front matter, which is unfortunate since it would be preferable to keep all menu items together.
To set the weight and other properties - and this is not explained in the docs - use the following formatting:

+++
[menu]
     [menu.main]
        name = "About me"
        weight = -30000 
+++
2 Likes
17

Thank you, this is the only reply that made sense. I never saw a worst way of doing a menu.