# Conditional classes

**URL:** <https://talk.jekyllrb.com/t/conditional-classes/3871>\
**Category:** Help\
**Created:** [February 1, 2020, 10:29pm UTC](https://talk.jekyllrb.com/t/conditional-classes/3871 "2020-02-01T22:29:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JulSeb42](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/julseb42/32/2232_2.png) [@JulSeb42](https://talk.jekyllrb.com/u/JulSeb42)\
**Post date:** [February 1, 2020, 10:29pm UTC](https://talk.jekyllrb.com/t/conditional-classes/3871/1 "2020-02-01T22:29:03Z")

</div>

Hey,

I’m trying to add a conditional class on url in a navigation. It’s working well for pages inside the root, but not for pages inside folders. This is my code so far:

```auto
{% for item in site.data.nav %}
     <li class="{% if item.link == page.url %}active{% endif %}">
          <a href="{{ item.link }}">{{ item.title }}</a>
     </li>
{% endfor %}

```

I’d like to have this class active on one link of this list (the one corresponding to the folder). I tried that:

```auto
<li class="{% if item.link == page.url %}active {% elsif page.layout == 'projects'%}active{% endif %}">

```

But it put the class on every items of the list.

Does someone has a solution?

Thank you!

---

<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:** [February 2, 2020, 3:20am UTC](https://talk.jekyllrb.com/t/conditional-classes/3871/2 "2020-02-02T03:20:21Z")

</div>

not sure if this is what you mean or not but I think its similar - when I do this on the home page I use front matter that says `active: true` on that page only, and then when I build the links for the nav I do:

`<a class="nav-item nav-link{% if page.active %} active{% endif %}" href="/">Home</a>`

and then more or less what you have. But I am hard coding the links not looping thru so you may have to do some other stuff, but front matter on the one root page may help.

---

<div class="post-metadata">

**Author:** ![JulSeb42](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/julseb42/32/2232_2.png) [@JulSeb42](https://talk.jekyllrb.com/u/JulSeb42)\
**Post date:** [February 2, 2020, 9:18am UTC](https://talk.jekyllrb.com/t/conditional-classes/3871/3 "2020-02-02T09:18:38Z")

</div>

Hey,

Since the code is generated and not hard coded the it’s not gonna work…