# Adding "active" class to menu not working for files inside \_data folder

**URL:** <https://talk.jekyllrb.com/t/adding-active-class-to-menu-not-working-for-files-inside-data-folder/6654>\
**Category:** Uncategorized\
**Created:** [November 7, 2021, 10:01pm UTC](https://talk.jekyllrb.com/t/adding-active-class-to-menu-not-working-for-files-inside-data-folder/6654 "2021-11-07T22:01:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 7, 2021, 10:01pm UTC](https://talk.jekyllrb.com/t/adding-active-class-to-menu-not-working-for-files-inside-data-folder/6654/1 "2021-11-07T22:01:20Z")

</div>

I am trying to add an “active” class to the categories on my main menu when the category is opened and also for the category when a single post in that category is opened. All posts in the `_posts` folder are in folders bearing the category names. I can get the active class to work when I hard code all the menu items like this

```auto
<ul class="nav-menu">
      <li {% if page.url contains '/category/name/' or page.path contains "_posts/category-name" %}class="active" aria-current="page"{% endif %}><a href="/category/name/">Category Name</a></li>
    </ul>

```

But it does not work if I create the navigation inside a nav.yaml file like this

```auto
- title: Category Name
  url: /category/name/
  path: _posts/category-name

```

and then add this to header.html

```auto
<ul class="nav-menu">
      {% for nav in site.data.nav %}
      <li {% if page.url contains '{{nav.url}}' or page.path contains "{{nav.path}}" %}class="active" aria-current="page"{% endif %}><a href="{{nav.url}}">{{nav.title}}</a></li>
     {% endfor %}
    </ul>

```

I am trying not to hard code the menu items, so my question is, how do I get the items in the `_data` file to work as expected?

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [November 8, 2021, 3:39am UTC](https://talk.jekyllrb.com/t/adding-active-class-to-menu-not-working-for-files-inside-data-folder/6654/2 "2021-11-08T03:39:30Z")

</div>

I don’t think you need the double curlies when inside the {% %} block - I saw someone post something about that here recently. I’d try it without. Next question would be the quotes around the variable, not too sure about that, might not need those either since it is a variable of sorts and not a string?

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [November 8, 2021, 7:28am UTC](https://talk.jekyllrb.com/t/adding-active-class-to-menu-not-working-for-files-inside-data-folder/6654/3 "2021-11-08T07:28:59Z")

</div>

> [@afrique](#):
>
> I am trying not to hard code the menu items,

- **Do not wrap your _variables_ in quotes. Quoted contents are parsed as literal strings.**
- **Do not use `{{` and `}}` to enclose variables within Liquid core tags.** Such syntax is only valid in Jekyll tags such as `{% link ... %}` or `{% include ... %}` or their derivatives.

The desired template is therefore:

```auto
<ul class="nav-menu">
  {% for nav in site.data.nav %}
    <li {% if page.url contains nav.url or page.path contains nav.path %}class="active" aria-current="page"{% endif %}>
      <a href="{{ nav.url }}">{{ nav.title }}</a>
    </li>
  {% endfor %}
</ul>

```

Note: Using the template above is fine as long as you’re crafting data carefully.  
For example, if your data file had contained an entry such as `url: /category/`, then the `if` condition will be true for all category pages.

---

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 28, 2021, 5:20pm UTC](https://talk.jekyllrb.com/t/adding-active-class-to-menu-not-working-for-files-inside-data-folder/6654/4 "2021-11-28T17:20:56Z")

</div>

Thanks a lot. It worked.