# Menu not being set to active

**URL:** <https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959>\
**Category:** support\
**Created:** [February 12, 2019, 1:19pm UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959 "2019-02-12T13:19:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![benmarte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benmarte/32/5948_2.png) [@benmarte](https://discourse.gohugo.io/u/benmarte)\
**Post date:** [February 12, 2019, 1:19pm UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959/1 "2019-02-12T13:19:24Z")

</div>

Hey guys I think I found a bug with the menu template example in the docs: [Menu Templates | Hugo](https://gohugo.io/templates/menu-templates/)

When using this code sample for the menu:

```auto

<!-- sidebar start -->
<aside>
    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
            {{ if .HasChildren }}
                <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
                    <a href="#">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
                <ul class="sub-menu">
                    {{ range .Children }}
                        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
                            <a href="{{ .URL }}">{{ .Name }}</a>
                        </li>
                    {{ end }}
                </ul>
            {{ else }}
                <li>
                    <a href="{{ .URL }}">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
            {{ end }}
        {{ end }}
        <li>
            <a href="#" target="_blank">Hardcoded Link 1</a>
        </li>
        <li>
            <a href="#" target="_blank">Hardcoded Link 2</a>
        </li>
    </ul>
</aside>

```

And specifying my menu.main in my config.toml file as so:

```auto
[[menu.main]]
    identifier = "book-me"
    name = "Book Me" 
    url = "/book-me/"
    weight = 1
[[menu.main]]
    identifier = "coaching"
    name = "Coaching"
    url = "/coaching/"
    weight = 2
[[menu.main]]
    identifier = "detox"
    name = "Detox"
    url = "/detox/"
    weight = 3
[[menu.main]]
    identifier = "forms"
    name = "Forms" 
    url = "/forms/"
    weight = 4
[[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 5
[[menu.main]]
    identifier = "extras"
    name = "Extras"
    url = "/extras/"
    weight = 6
[[menu.main]]
    identifier = "blog"
    name = "Blog"
    url = "/blog/"
    weight = 7

```

It never adds the active class but if I remove all menu entries in my config.toml and add the menu entries in my page Front Matter as so:

```auto
menu:
  main:
    identifier: blog
    name: Blog
    title: Blog
    url: /blog/
    weight: 7

```

It adds the active class to my menu entries, is this a bug or am I just not understanding how menu templates are supposed to work?

Thanks.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [February 12, 2019, 6:57pm UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959/2 "2019-02-12T18:57:12Z")

</div>

I think your template is too complicated, to get a menu from config.toml

```
{{ range .Site.Menus.main}}
	<p> <a href="{{ .URL | relURL }}" Title="{{ .Name }}">{{ .Name }}</a> </p>
{{end}}

```

Extend it slowly an check what works.

---

<div class="post-metadata">

**Author:** ![benmarte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benmarte/32/5948_2.png) [@benmarte](https://discourse.gohugo.io/u/benmarte)\
**Post date:** [February 12, 2019, 6:59pm UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959/3 "2019-02-12T18:59:09Z")

</div>

Not sure what you mean that is the official template example in the docs, not something I made up.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [February 12, 2019, 7:56pm UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959/4 "2019-02-12T19:56:12Z")

</div>

@benmarte If you want to keep your menu in your `config.toml` then you probably have to do something like below, and compare the current page title to the current menu iteration name (assuming they’d be the same value).

```plaintext
<aside>
  <ul>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
      {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
      <li class="{{ if $active }}active{{ end }}">
        <a href="{{ .URL }}">
          <span>{{ .Name }}</span>
        </a>
      </li>
    {{ end }}
  </ul>
</aside>

```

In the docs you linked, also keep this in mind:

> In the above, the menu item is marked as active **if on the current section’s list page or on a page in that section.**

So it’s likely that the pages in your menu are not each their own section, hence why I added the compare above for title-to-name.

---

<div class="post-metadata">

**Author:** ![benmarte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benmarte/32/5948_2.png) [@benmarte](https://discourse.gohugo.io/u/benmarte)\
**Post date:** [February 13, 2019, 10:23am UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959/5 "2019-02-13T10:23:23Z")

</div>

@zberwaldt Thanks my problem was exactly what you mentioned, my pages were not their own section once I got them into sections it works.

Thanks again man 👍

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [February 13, 2019, 11:02am UTC](https://discourse.gohugo.io/t/menu-not-being-set-to-active/16959/6 "2019-02-13T11:02:14Z")

</div>

Hi all!

As the current page title and the current menu iteration name can be different (just as you said  
@zwbetz) I use a slightly different version.

Works with pages in sub-folders, too!

```auto
{{ $active := or (eq $.URL .URL) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}

```