Dynamic navigation with tags and active state

[playdo]

Hi!

I’m trying to create a dynamic navigation menu from my tags. I have this part working so far. I am struggling with figuring out a way to add a ‘active’ state to the menu item when viewing the corresponding tag page… Here is the code – I’ve added comments and text to illustrate the part I can’t figure out :

<ul>
  {{!-- {{#is "tag"}} {{ tag.slug }} {{/is}} --}}
  {{!-- {{ url }} --}}
  {{#get "tags"}} 
    {{#foreach tags}}
      
      <li > <!-- add an "active" class to this if I am on this tag's page -->
        {{#has tag="slug portion of the url .... ? "}} THIS TAG IS ACTIVE! {{/has}}
        <a href="{{url}}">
          {{ name }}
        </a>
      </li>
    {{/foreach}}
  {{/get}}
</ul>

[John]

Ghost automatically outputs .nav-current on active nav items

If you’re overriding the default navigation.hbs then you can see how we did the original, here:

https://github.com/TryGhost/Ghost/blob/master/core/server/helpers/tpl/navigation.hbs

Sounds like you might be looking for {{#if current}}

[playdo]

Hey, thanks, though that’s not quite what I’m looking for.

I’d like to have a dynamic menu. i.e. I want the template to go through the list of tags and render them, instead of me having to manually add a navigation item on the admin interface every time I create a new tag.

Is there a way I can determine if I am on the tag page, while going through the list of tags with a get ?

Hope this makes sense.

[pascalandy]

That’s a good idea.

[playdo]

Guessing what I’m looking for isn’t possible right now? Any other suggestions for a way to hack at it?

It would also be nice to light up a menu-item as active when you’re on a post page that has that item as a primary tag… would need to be able to test the slug against the tag in the get loop for that too…

[Hannah]

The best solution available currently would be to use client side javascript to mark the menu item which matches the current URL.