Thread

Hello-

I’m outputting a list of categories as part of my site’s header. I want to apply the “active” class to the A tag for the current category that I am on. Here’s my first attempt at the code:

{exp:channel:categories channel="projects" style="nested" id="project_categories"}
    <a href="http://{path=%27projects/index%27}" class="{if category_id == {exp:channel:category_heading channel=projects}{category_id}{/exp:channel:category_heading}}active{/if}">{category_name}</a>
{/exp:channel:categories}

Basically, I’m trying to apply the active class if the category_id in the outputted list matches the category_id returned from the category_heading tag. Unfortunately, this doesn’t work and my hunch is that it is pretty inelegant.

What is the right way to do this?

Regards,
Eric

I’ve tended to do this based on the URL using a segment. So rather than nest a heading tag inside the channel:categories tag, you can just do a lookup of appropriate segment in the URL from within the channel:categories tag pair.  So something like:

{exp:channel:categories channel="your-channel" category_group="#" style="nested"}
<a href="http://{path=template_group/listing_template}{if">{category_name}</a>
{/exp:channel:categories}

Hope that helps.

That did the trick. Thanks!

BTW, here is the final code that I used:

{exp:channel:categories channel="projects" style="nested" id="project_categories"}
    <a href="http://{path=%27projects/index%27}" class="{if segment_3 == category_url_title}active{/if}">{category_name}</a>
{/exp:channel:categories}

Great. Glad that helped!