# How to add 'active' class to Hugo?

**URL:** <https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829>\
**Category:** support\
**Created:** [November 30, 2021, 1:27am UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829 "2021-11-30T01:27:55Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![esawertu](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@esawertu](https://discourse.gohugo.io/u/esawertu)\
**Post date:** [November 30, 2021, 1:27am UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/1 "2021-11-30T01:27:55Z")

</div>

I would like to add an active class when:

1. I am on a page
2. I am on a category page
3. To the category item in the menu when the post/page in that category is open

My menu is in this format in config.toml

```auto
[menu]
[[menu.main]]
    identifier = "Name"
    name = "Name"
    url = "/category/name/"
    weight = number

```

And my navigation is like this

```auto
<ul class="nav-menu">
 {{ $currentPage := . }}
  {{ range .Site.Menus.main }}
    <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
     <a href="{{.URL}}">{{ .Name }}</a></li>
  {{ else }}
    <li><a href="{{.URL}}">{{ .Name }}</a></li>
 {{ end }}
</ul>

```

What am I missing?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [November 30, 2021, 3:10am UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/2 "2021-11-30T03:10:40Z")

</div>

> [@esawertu](#):
>
> What am I missing?

Two things.

1) Use `.IsMenuCurrent` instead of `.HasMenuCurrent`.

2) In your site configuration, use `pageref` instead of `url` ([known issue](https://github.com/gohugoio/hugo/issues/9150)).

```auto
 [[menu.main]]
 name = "Foo"
 pageref = "/category/foo/"

 [[menu.main]]
 name = "Bar"
 pageref = "/category/bar/"

 [[menu.main]]
 name = "Baz"
 pageref = "/category/baz/"

```

---

<div class="post-metadata">

**Author:** ![esawertu](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@esawertu](https://discourse.gohugo.io/u/esawertu)\
**Post date:** [November 30, 2021, 10:56am UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/3 "2021-11-30T10:56:45Z")

</div>

Thanks! So, this is how it has worked so far:

1. On a page - it is not working when I define a different `[menu][menu-nav]` and assign page links to it. The workaround was to add the `menu: nav` `weight: number` to the front matter of every page I wanted in the (footer) navigation and they appeared automatically in the navigation without configuring them in `config.toml`.
2. On a category page - works by retaining the code in the `config.toml` and adding `IsMenuCurrent` as you suggested.
3. Highlighting category as active in main navigation when a post is opened - does not work. Adding the frontmatter `menu: main` makes the post title appear in the navigation. That would mean over 250 entries in the title alone.

I would prefer to define the pages in the config so I can shorten the titles and have the “highlight category when post open” issue work too.

---

<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:** [November 30, 2021, 12:49pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/4 "2021-11-30T12:49:13Z")

</div>

Like @jmooring mentioned there seems to be better ways to handle this now-a-days.

But in the past, @esawertu I’ve handled it like this:

```auto
{{ $current := . }}
{{ range site.Menus.nav }}
	{{ $active := or ($current.IsMenuCurrent "nav" .) ($current.HasMenuCurrent "nav" .) }}
	{{ $active = or $active (eq .Name $current.Title) }}
	{{ $active = or $active (eq .URL $current.RelPermalink) }}
	{{ $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog")) }}
		<a class="{{ if $active }}active{{ end }}" href="{{ .URL }}">
			{{ .Name }}
		</a>
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![esawertu](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@esawertu](https://discourse.gohugo.io/u/esawertu)\
**Post date:** [November 30, 2021, 1:49pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/5 "2021-11-30T13:49:14Z")

</div>

@zwbetz that is causing all manors of issues.

---

<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:** [November 30, 2021, 1:55pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/6 "2021-11-30T13:55:21Z")

</div>

You’ll have to tweak it for your setup.

So at the least change

```auto
site.Menus.nav

```

To be

```auto
site.Menus.main

```

---

<div class="post-metadata">

**Author:** ![esawertu](https://avatars.discourse-cdn.com/v4/letter/e/94ad74/32.png) [@esawertu](https://discourse.gohugo.io/u/esawertu)\
**Post date:** [November 30, 2021, 1:58pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/7 "2021-11-30T13:58:10Z")

</div>

Nav should show the footer menu, but your code made the menu appear on the top navigation as well. I am using `.page.path` in Jekyll to get option 3 to work, but I am not sure what Hugo’s equivalent is.

---

<div class="post-metadata">

**Author:** ![williamdes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/williamdes/32/24490_2.png) [@williamdes](https://discourse.gohugo.io/u/williamdes)\
**Post date:** [May 4, 2025, 10:34am UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/8 "2025-05-04T10:34:14Z")

</div>

See also [https://stackoverflow.com/a/56454338/5155484](https://stackoverflow.com/a/56454338/5155484) for multi lang websites

```html
<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
        {{ $currentPage := . }}
        {{ range site.Menus.main }}

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

            {{ $active := eq $menu_item_url $page_url }}
            <li class="nav-item">
                <a class="nav-link{{ if $active }} active{{ end }}"
                    href="{{ $menu_item_url }}"
                    {{ if $active }}aria-current="page"{{ end }}>{{ .Name }}</a>
            </li>
        {{ end }}
    </ul>
</div>

```

---

<div class="post-metadata">

**Author:** ![tyco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tyco/32/23754_2.png) [@tyco](https://discourse.gohugo.io/u/tyco)\
**Post date:** [May 4, 2025, 12:55pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/9 "2025-05-04T12:55:58Z")

</div>

Just do it the Hugo way. See [Menus](https://gohugo.io/methods/site/menus/#article). Plus Hugo has had rapid development in 7 years, and a rule of thumb is to always give precedence to the docs.

```auto
{{ with site.Menus.main }}
  <nav class="menu">
    {{ range . }}
      {{ if $.IsMenuCurrent .Menu . }}
        <a class="active" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
      {{ else }}
        <a href="{{ .URL }}">{{ .Name }}</a>
      {{ end }}
    {{ end }}
  </nav>
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![williamdes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/williamdes/32/24490_2.png) [@williamdes](https://discourse.gohugo.io/u/williamdes)\
**Post date:** [May 13, 2025, 3:10pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/10 "2025-05-13T15:10:28Z")

</div>

Thank you, here is my updated version:

```html
<div class="collapse navbar-collapse" id="navbarNav">
    {{ with site.Menus.main }}
    <ul class="navbar-nav">
        {{ range . }}

            {{ $active := $.IsMenuCurrent .Menu . }}
            <li class="nav-item">
                <a class="nav-link{{ if $active }} active{{ end }}"
                    href="{{ .URL }}"
                    {{ if $active }}aria-current="page"{{ end }}>{{ .Name }}</a>
            </li>
        {{ end }}
    </ul>
    {{ end }}
</div>

```

---

<div class="post-metadata">

**Author:** ![dbob16](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dbob16/32/19470_2.png) [@dbob16](https://discourse.gohugo.io/u/dbob16)\
**Post date:** [May 14, 2025, 6:20pm UTC](https://discourse.gohugo.io/t/how-to-add-active-class-to-hugo/35829/11 "2025-05-14T18:20:55Z")

</div>

Keep in mind that IsMenuCurrent only reports back if the immediate page in the context. If the user navigates to a page nested under the page that is on the menu, it won’t mark it as active. For that reason you can use an or statement with IsMenuCurrent and HasMenuCurrent as inputs.

How I do it for my sites:

```html
{{- $currentpage := . -}}
{{- range .Site.Menus.main }}
<div class="nav-item menutoggle">
{{- if or ($currentpage.IsMenuCurrent "main" .) ($currentpage.HasMenuCurrent "main" .)}}
<a href="{{ .URL }}" class="nav-link block active">{{ .Title }}</a>
{{- else }}
<a href="{{ .URL }}" class="nav-link block">{{ .Title }}</a>
{{- end }}
</div>
{{- end }}

```