diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
index d9adcd77f8..856259a69d 100644
--- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
@@ -23,6 +23,9 @@
       {% block localbreadcrumb %}{% endblock %}
     </ul>
     <script>
+
+      var configVarUrl = "{% url 'configvars' build.id %}";
+
       $(document).ready(function(){
         $('#breadcrumb > li').append('<span class="divider">&rarr;</span>');
         $('#breadcrumb > li:last').addClass("active");
@@ -30,10 +33,18 @@
 
         $("#build-menu li a").each(function(){
           /* Set the page active state in the Build menu */
-          if (window.location.href.split('?')[0] === $(this).prop("href")){
+          var currentUrl = window.location.href.split('?')[0]; 
+          if (currentUrl === $(this).prop("href")){
             $(this).parent().addClass("active");
           } else {
-            $(this).parent().removeClass("active");
+            /* Special case the configvar as this is part of configuration
+             * page but is a separate url
+             */
+            if (window.location.pathname === configVarUrl){
+              $("#menu-configuration").addClass("active");
+            } else {
+              $(this).parent().removeClass("active");
+            }
           }
         });
       });
@@ -55,15 +66,12 @@
           <li class="nav-header">Images</li>
           {% block nav-target %}
             {% for t in build.get_sorted_target_list %}
-              <li><a href="{% url 'target' build.pk t.pk %}">{{t.target}}</a><li>
+            <li id="menu-{{t.target}}"><a href="{% url 'target' build.pk t.pk %}">{{t.target}}</a><li>
             {% endfor %}
           {% endblock %}
         {% endif %}
         <li class="nav-header">Build</li>
-        {% block nav-configuration %}
-          <li><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
-        {% endblock %}
-
+          <li id="menu-configuration"><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
           <li><a href="{% url 'tasks' build.pk %}">Tasks</a></li>
           <li><a href="{% url 'recipes' build.pk %}">Recipes</a></li>
           <li><a href="{% url 'packages' build.pk %}">Packages</a></li>
diff --git a/bitbake/lib/toaster/toastergui/templates/configuration.html b/bitbake/lib/toaster/toastergui/templates/configuration.html
index 1032ebe903..1d0ec3f484 100644
--- a/bitbake/lib/toaster/toastergui/templates/configuration.html
+++ b/bitbake/lib/toaster/toastergui/templates/configuration.html
@@ -6,10 +6,6 @@
 <li>Configuration</li>
 {% endblock %}
 
-{% block nav-configuration %}
-  <li class="active"><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
-{% endblock %}
-
 {% block buildinfomain %}
 <!-- page title -->
 <div class="col-md-10">
diff --git a/bitbake/lib/toaster/toastergui/templates/configvars.html b/bitbake/lib/toaster/toastergui/templates/configvars.html
index 89d2fa446d..ca2e1eab39 100644
--- a/bitbake/lib/toaster/toastergui/templates/configvars.html
+++ b/bitbake/lib/toaster/toastergui/templates/configvars.html
@@ -6,10 +6,6 @@
 <li>Configuration</li>
 {% endblock %}
 
-{% block nav-configuration %}
-  <li class="active"><a href="{% url 'configuration' build.pk %}">Configuration</a></li>
-{% endblock %}
-
 {% block buildinfomain %}
 <!-- page title -->
 <div class="col-md-10">
diff --git a/bitbake/lib/toaster/toastergui/templates/dirinfo.html b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
index 458e933685..ab89e279fa 100644
--- a/bitbake/lib/toaster/toastergui/templates/dirinfo.html
+++ b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
@@ -18,6 +18,13 @@
 {% load projecttags %}
 
 <script type='text/javascript'>
+  var ctx = {};
+  ctx.target = "{{target.target}}";
+
+  $(document).ready(function(){
+    $("#menu-"+ctx.target).addClass("active");
+  });
+
     function setupTreetable() {
         $("#dirtable").treetable({
             expandable: true,