Dynamic navigation with tags and active state



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 :

  {{!-- {{#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 }}


Ghost automatically outputs .nav-current on active nav items :slight_smile:

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

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


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.


That’s a good idea.


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…


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


This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.