title: Play! Framework & Twitter Bootstrap Dropdown active
body: <p>I have a play framework application and I am using twitter bootstrap for the frontend.</p>
  
  <p>In my navigation bar I have four options shown below.</p>
  
  <pre><code>      &lt;div class="nav-collapse"&gt;
          &lt;ul class="nav"&gt;
            &lt;li class="@("active".when(nav == ""))"&gt;&lt;a href="@routes.Application.index()"&gt;@Messages("playauthenticate.navigation.home")&lt;/a&gt;&lt;/li&gt;
            &lt;li class="@("active".when(nav == "restricted"))"&gt;&lt;a href="@routes.Application.restricted()"&gt;@Messages("playauthenticate.navigation.restricted")&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Journey Management&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="@routes.Application.createJourney()"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option1")&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option2")&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option3")&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
              @if(!Deadbolt.viewRoleHolderPresent()) {
                  &lt;li class="@("active".when(nav == "signup"))"&gt;&lt;a href="@routes.Application.signup()"&gt;@Messages("playauthenticate.navigation.signup")&lt;/a&gt;&lt;/li&gt;
              }
          &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>When I navigate to a "Home" or "Signup" page those options become <strong>active</strong> on the navigation bar. My problem is whenever I select an option from the dropdown bar the "Home" button remains active. I want the "Journey Management" option to be <strong>active</strong> but I am not sure how to do this with a dropdown menu.</p>
  
  <p>So I have made the following modifications to the HTML.</p>
  
  <pre><code> &lt;li class="@("active".when(nav == "journeys")) dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Journey Management&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="@routes.Application.createJourney()"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option1")&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option2")&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="@routes.Application.Todo()"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;@Messages("journeys.dropdown.option3")&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  </code></pre>
  
  <p>When I select an option from the Journey Management dropdown, in this case the <strong>"Create Journey"</strong> page (it is the only page that has an action) the localhost address is <code>http://localhost:9000/journeys</code> so I am calling a method in the journeys application route. But the Home link on the navbar remains active whilst the Journey Management dropdown on the nav bar remains inactive.</p>
  
  <p><img src="https://i.stack.imgur.com/67maW.png" alt="Screenshot describing problem"></p>
  
  <p>Here is the source for the loaded page: </p>
  
  <p>This is the HTML from the actual page      </p>
  
  <pre><code>&lt;div class="nav-collapse"&gt;
      &lt;ul class="nav"&gt;
        &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="/restricted"&gt;Restricted page&lt;/a&gt;&lt;/li&gt;
        &lt;li class=" dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Journey Management&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="/journeys"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;Create a Journey&lt;/a&gt;       &lt;/li&gt;
            &lt;li&gt;&lt;a href="/TODO"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;View all Journeys&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/TODO"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;View saved Journeys&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;`
  </code></pre>