Tag navigation: add active states

Last Updated: Jul 27, 2015 11:04AM PDT
If you have created a tag menu inside your project list (see this Knowledge Base article) or have added a tag menu through your Custom HTML, you can add “active” states to it through the use of a script tag in your Custom HTML:
 <script type="text/javascript">
* Add a filter to your project navigation
function addFilterActive(selector, remove_on_page, active_class) {
   if(typeof Cargo.Helper == "object") {
       var filter = Cargo.Helper.GetActiveFilter();
   } else {
       var filter = Cargo.Location.GetUserFilter();

   var el_selector = (selector) ? $(selector) : $('.link_link');
       active_class = (active_class) ? active_class : "link_active";

   if( $('[href$="filter/'+filter+'"]',el_selector).parent() == selector) {
   } else {

   if(remove_on_page) {
       $(document).bind("projectLoadComplete", function() {
       $(document).bind("projectCloseComplete", function() {
           addFilterActive(selector, false);

$(function() {
   var selector = ".link_link";
   var remove_on_page = true;
   var active_class = "link_active";

   addFilterActive(selector, remove_on_page, active_class);
This will add the .link_active class to each of your links when clicked. This can be targeted by .link_active in your CSS:
.link_link.link_active a {
    background: #D9D919;

​For feed-based designs:

a.link_active {
    background: #D9D919;

With active states in the tag menu, it's not really necessary for the default tag information ( "Filter: tag / view all" ) to be visible in your website. This can be hidden in your website by adding this into your CSS:
 .view_tag_info, .nav_container br, .filter {
Breaks in the text nav element are also hidden by this customization.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found