# Active Links in Menu

**URL:** <https://discourse.gohugo.io/t/active-links-in-menu/8717>\
**Category:** support\
**Created:** [October 9, 2017, 9:42am UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717 "2017-10-09T09:42:50Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhanishgajjar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dhanishgajjar/32/10423_2.png) [@dhanishgajjar](https://discourse.gohugo.io/u/dhanishgajjar)\
**Post date:** [October 9, 2017, 9:42am UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/1 "2017-10-09T09:42:50Z")

</div>

I am trying to set an active class on the current page menu item. I have my menu setup in config.toml

```
[[menu.main]]
    name = "Home"
    weight = 1
    identifier = "home"
    url = "/"
[[menu.main]]
    name = "Projects"
    weight = 2
    identifier = "projects"
    url = "/projects/"

```

In my navigation.html partial I have a conditional

```
<nav>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
      <a class="nav-links{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{.URL}}">{{ .Name }}</a>
    {{ end }}
</nav>

```

However, the first item in the menu “Home” is highlighted and it gets the class of active, but when I click on any other page, those links don’t get the active class. The home does lose the class when it’s not active.

I am still confused, the documentation isn’t that clear on Hugo. I would like to understand this better.

Thanks

---

<div class="post-metadata">

**Author:** ![dhanishgajjar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dhanishgajjar/32/10423_2.png) [@dhanishgajjar](https://discourse.gohugo.io/u/dhanishgajjar)\
**Post date:** [October 9, 2017, 10:35am UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/2 "2017-10-09T10:35:58Z")

</div>

I got it, the front matter had to be updated instead of putting them in the config file

---

<div class="post-metadata">

**Author:** ![Leo\_Merkel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leo_merkel/32/3321_2.png) [@Leo\_Merkel](https://discourse.gohugo.io/u/Leo_Merkel)\
**Post date:** [October 9, 2017, 11:44am UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/3 "2017-10-09T11:44:04Z")

</div>

This works for me (the classes come from [Tachyons](http://tachyons.io/)):

```auto
<nav id="main-nav">

  {{ $page := .Page }}
  {{ $site := .Site }}

  <!-- https://discourse.gohugo.io/t/range-length-or-last-element/3803/3 -->
  {{ $list := .Site.Menus.main }}
  {{ $len := (len $list) }}

  <ul>
    <!-- All pages but the homepage shall have a link to homepage -->
    {{ if not .IsHome }}
      <li class="dib lh-copy"><a class="link underline-hover dim br ph2" href="/">Home</a></li>
    {{ end }}

    {{ range $index, $element := $list }}
      {{ $is := $page.IsMenuCurrent "main" . }}
      {{ $has := $page.HasMenuCurrent "main" . }}
      <li
        {{ if or $is $has }}
          class="li-active dib lh-copy"
        {{ else }}
          class="dib lh-copy"
        {{ end }}>
        <a
          {{ if eq (add $index 1) $len }}
            class="ph2 link underline-hover dim"
          {{ else }}
            <!-- Here it sets a border right unless its last element -->
            class="ph2 link underline-hover dim br"
          {{ end }}
            href="{{ .URL | absURL }}">
          {{ .Pre }} {{ .Name }}
        </a>
      </li>
    {{ end }}
  </ul>
</nav>

```

And in Front Matter the menu entries look like:

```auto
[menu.main]
name = Nav title
weight = 25

[menu.footer]
weight = 10

```

---

<div class="post-metadata">

**Author:** ![dhanishgajjar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dhanishgajjar/32/10423_2.png) [@dhanishgajjar](https://discourse.gohugo.io/u/dhanishgajjar)\
**Post date:** [October 9, 2017, 1:24pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/4 "2017-10-09T13:24:30Z")

</div>

Thanks

---

<div class="post-metadata">

**Author:** ![aleksand88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aleksand88/32/5861_2.png) [@aleksand88](https://discourse.gohugo.io/u/aleksand88)\
**Post date:** [October 20, 2017, 2:28pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/5 "2017-10-20T14:28:12Z")

</div>

Sorry, but if isn’t in config.toml so where exactly should menu be?

---

<div class="post-metadata">

**Author:** ![dhanishgajjar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dhanishgajjar/32/10423_2.png) [@dhanishgajjar](https://discourse.gohugo.io/u/dhanishgajjar)\
**Post date:** [October 20, 2017, 3:53pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/6 "2017-10-20T15:53:57Z")

</div>

Actually it’s a choice, I am still discovering Hugo. If I don’t mention anything in the config file and just add some front matter in pages like menu: “main”, weight: “2” for example, it still shows up in the top main navigation 🙂

---

<div class="post-metadata">

**Author:** ![Leo\_Merkel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leo_merkel/32/3321_2.png) [@Leo\_Merkel](https://discourse.gohugo.io/u/Leo_Merkel)\
**Post date:** [October 20, 2017, 3:59pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/7 "2017-10-20T15:59:27Z")

</div>

You can put in in `config.toml` or in Front Matter the same way. Both are discovered by `.Site.Menus.main`. And you can do both…

---

<div class="post-metadata">

**Author:** ![aleksand88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aleksand88/32/5861_2.png) [@aleksand88](https://discourse.gohugo.io/u/aleksand88)\
**Post date:** [October 20, 2017, 4:37pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/8 "2017-10-20T16:37:10Z")

</div>

Thanks. Can you provide some full example? Because now I’m using in `config.toml` it renders ok with nested items.  
When I put menu item in frontmatter it displays well but I have issues with nested items and checking what item is `active` now.

In `config.toml`:

```
[[menu.main]]
  name = "About"
  weight = -110
  url = "/about"
  identifier = "about"

[[menu.main]]
    name = "Other"
    weight = -110
    identifier = "other"

[[menu.main]]
    name = "Culture"
    weight = -110
    url = "/other/culture"
    parent = "other"

[[menu.main]]
    name = "Contacts"
    weight = -110
    url = "/other/contacts"
    parent = "other"

[[menu.main]]
    name = "FAQ"
    weight = -110
    url = "/other/faq"
    parent = "other"

```

Changing `active` from here [https://gohugo.io/templates/menu-templates/](https://gohugo.io/templates/menu-templates/) doesn’t work

What should I do to make it works? Any suggestion would be great, because my is over for now ☹

---

<div class="post-metadata">

**Author:** ![Leo\_Merkel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leo_merkel/32/3321_2.png) [@Leo\_Merkel](https://discourse.gohugo.io/u/Leo_Merkel)\
**Post date:** [October 20, 2017, 6:08pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/9 "2017-10-20T18:08:08Z")

</div>

Perhaps it helps if you browse through my test project: [https://legobitbucket@bitbucket.org/legobitbucket/hugo-template.git](https://legobitbucket@bitbucket.org/legobitbucket/hugo-template.git)

Look in `partials/site/header.html` where you find the code for the menu. In `content` you can see the Markdown Files with Front Matter Menus.

Most of it is in german but you’ll find your way.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![aleksand88](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aleksand88/32/5861_2.png) [@aleksand88](https://discourse.gohugo.io/u/aleksand88)\
**Post date:** [October 20, 2017, 6:23pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/10 "2017-10-20T18:23:36Z")

</div>

Thank you for help. I hope too I’ll find answers

---

<div class="post-metadata">

**Author:** ![flavio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/flavio/32/6161_2.png) [@flavio](https://discourse.gohugo.io/u/flavio)\
**Post date:** [June 18, 2018, 1:20pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/11 "2018-06-18T13:20:24Z")

</div>

I used JavaScript for this, in case someone looks for the same query I was searching and jumps on this thread:

```auto
<script>
(function() {
    const links = document.getElementsByTagName('a')
    const currentUrl = location.href
    for (const link of links) {
        if (link.href === currentUrl) {
            link.classList.add('active')
        }
    }
}())
</script>

```

---

<div class="post-metadata">

**Author:** ![niels\_bom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/niels_bom/32/6397_2.png) [@niels\_bom](https://discourse.gohugo.io/u/niels_bom)\
**Post date:** [July 18, 2018, 2:46pm UTC](https://discourse.gohugo.io/t/active-links-in-menu/8717/12 "2018-07-18T14:46:03Z")

</div>

> [@flavio](#):
>
> I used JavaScript for this, in case someone looks for the same query I was searching and jumps on this thread:

It’s possible to do this _without_ JavaScript which is (in my eyes) a better solution, for the following reasons:

- visitors that have JavaScript turned off will still see the correct result
- because JavaScript can sometimes be executed later (for network or other reasons) the user will first see the menu without the highlighted current link and then see that link light up once the JavaScript runs.