{exp:channel:categories channel="News" style="nested"}

    <a href="{path='news/show/'}">{category_name}</a>              

{/exp:channel:categories} 

This code generates a nav unordered list of all the categories.

The categories are: News, Video, Press Releases. When users are on the 'news' page how do I give that category an 'active' class in the nav so user understand they are on that page.

up vote 3 down vote accepted

Assuming you are using category URL titles in your URL, like http://domain.com/category/news, then you can simply add a conditional within the loop like this:

{exp:channel:categories channel="News" style="nested"}

    <a href="{path='news/show/'}" {if segment_2 == category_url_title}class="active"{/if} >{category_name}</a>              

{/exp:channel:categories}

If you are using the exp:channel:categories in dynamic mode, no matter if using category_name on URL or category ID, you can use the {if active} conditional:

{exp:channel:categories channel="News" style="nested"}
    <a href="{path='news/show/'}" {if active} class="active"{/if}>{category_name}</a>
{/exp:channel:categories}

If you are not on dynamic mode or you're using Low Seg2Cat, you can use this:

{exp:channel:categories channel="News" style="nested"}
    <a href="{path='news/show/'}" {if segment_X == category_url_title} class="active"{/if}>{category_name}</a>
{/exp:channel:categories}

Replace segment_X by the segment related to your category.

Or you can set one class to every category and to the HTML or BODY element and use just CSS and child selector.

  • Just fyi, Low Seg2Cat wouldn't be needed to access the segment_X variable, those are in the core. – Jeremy Gimbel Oct 1 '13 at 3:29
  • I'm sorry. I thought the "or" made it clear. Feel free to improve my answer. – Robson Sobral Oct 1 '13 at 13:47

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.