# Menu option "active-branch"

**URL:** <https://community.hubspot.com/t/menu-option-active-branch/28034>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [November 16, 2020, 12:39pm UTC](https://community.hubspot.com/t/menu-option-active-branch/28034 "2020-11-16T12:39:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmgonzalez67](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jmgonzalez67/32/61905_2.png) [@jmgonzalez67](https://community.hubspot.com/u/jmgonzalez67)\
**Post date:** [November 16, 2020, 12:39pm UTC](https://community.hubspot.com/t/menu-option-active-branch/28034/1 "2020-11-16T12:39:40Z")

</div>

I have one menu in this blog:

> **[Fintech Pulse - Strands Blog](https://strands.com/blog/)**
>
> Strands is thought leader in fintech trends. Read on our thought leadership highlights in the financial industry here.

I need to mark the “All” option as active when we access the site and then deactivate it when we access any of the other options.

Thank you very much and best regards.

---

<div class="post-metadata">

**Author:** ![cathalhopper](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cathalhopper/32/5479_2.png) [@cathalhopper](https://community.hubspot.com/u/cathalhopper)\
**Post date:** [November 16, 2020, 6:32pm UTC](https://community.hubspot.com/t/menu-option-active-branch/28034/2 "2020-11-16T18:32:03Z")

</div>

Hi @jmgonzalez67 !  
The ideal way to do this would be to edit your current function that does this to accomodate the All button too!

If for any reason you can’t do that one quick way of doing this would be by using the following code in your blog listing template, in the Additional markup before \</body\> box on the right pane in the design manager.

\<script\>

{% if content.absolute\_url == "[https://blog.strands.com"](https://blog.strands.com) %}

document.querySelector(‘#hs\_menu\_wrapper\_module\_1603711816926175\_’).children[1].children[0].className += “active active-branch”;

{% endif %}

\</script\>

It’s important to add this in the “before \</body\>” tag, or otherwise to use a function that waits for the DOM elements to load, otherwise onload the styling would be overwritten.

After checking your page I saw that the styling is applied by appending the active active-branch to your class - there’s probably a few better ways of doing this, but that should work for now!  
Edit: as per @piersg [reply below](https://community.hubspot.com/t5/CMS-Development/Menu-option-quot-active-branch-quot/m-p/386982/highlight/true#M19625) they list an ideal way to do this if you’re editing your blog template or creating a new one using the [blog\_tags function](https://developers.hubspot.com/docs/cms/hubl/functions) - the fix above is specifically used as the set up uses a menu and no blog tag functions which I should have mentioned 🙂 Thanks for the advice @piersg !

---

<div class="post-metadata">

**Author:** ![jmgonzalez67](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jmgonzalez67/32/61905_2.png) [@jmgonzalez67](https://community.hubspot.com/u/jmgonzalez67)\
**Post date:** [November 17, 2020, 8:32am UTC](https://community.hubspot.com/t/menu-option-active-branch/28034/3 "2020-11-17T08:32:47Z")

</div>

Hi @cathalhopper ,

I have tried what you tell me and I understand what your code has to do, but it still doesn’t work.

Right now I have the code before the body, but as you can see, it does not work correctly.

Thank you very much!

---

<div class="post-metadata">

**Author:** ![jmgonzalez67](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jmgonzalez67/32/61905_2.png) [@jmgonzalez67](https://community.hubspot.com/u/jmgonzalez67)\
**Post date:** [November 17, 2020, 8:55am UTC](https://community.hubspot.com/t/menu-option-active-branch/28034/4 "2020-11-17T08:55:09Z")

</div>

Hi @cathalhopper

I have finally been able to fix the problem.

I have modified your code a bit and now it works correctly.

\<script\>

{% if content.absolute\_url == “[https://blog.strands.com](https://blog.strands.com)” %}

document.querySelector(‘#hs\_menu\_wrapper\_module\_1603711816926175\_ ul’).children[0].className += “active active-branch”;

{% endif %}

\</script\>

Thank you very much and best regards!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [November 17, 2020, 10:30am UTC](https://community.hubspot.com/t/menu-option-active-branch/28034/5 "2020-11-17T10:30:27Z")

</div>

Hey @jmgonzalez67, it looks like you solved this, but for anyone else viewing this question you can do something like the below. The advantage of this is that it requires no additional JS/jQuery, it can be all be done using HubL.

```lia-code-sample
{% set my_tags = blog_tags('default', 250) %}
<a href="{{ group.absolute_url }}" class="button{% if request.full_url == group.absolute_url %} active{% endif %}">All</a>
{% for item in my_tags|sort(False, False, 'name') %}
 <a href="{{ blog_tag_url(group.id, item.slug) }}" class="button{% if page_meta.html_title|split(' | ')|last == item %} active{% endif %}">{{ item }}</a>
{% endfor %}

```

Edit: sorry, forgot to add “All” button