Question

I have a play framework application and I am using twitter bootstrap for the frontend.

In my navigation bar I have four options shown below.

      <div class="nav-collapse">
        <ul class="nav">
          <li class="@("active".when(nav == ""))"><a href="@routes.Application.index()">@Messages("playauthenticate.navigation.home")</a></li>
          <li class="@("active".when(nav == "restricted"))"><a href="@routes.Application.restricted()">@Messages("playauthenticate.navigation.restricted")</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="@routes.Application.createJourney()"><i class="icon-plus-sign"></i>@Messages("journeys.dropdown.option1")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-calendar"></i>@Messages("journeys.dropdown.option2")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-star"></i>@Messages("journeys.dropdown.option3")</a></li>
            </ul>
          </li>

            @if(!Deadbolt.viewRoleHolderPresent()) {
                <li class="@("active".when(nav == "signup"))"><a href="@routes.Application.signup()">@Messages("playauthenticate.navigation.signup")</a></li>
            }
        </ul>
      </div>

When I navigate to a “Home” or “Signup” page those options become active 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 active but I am not sure how to do this with a dropdown menu.

So I have made the following modifications to the HTML.

 <li class="@("active".when(nav == "journeys")) dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="@routes.Application.createJourney()"><i class="icon-plus-sign"></i>@Messages("journeys.dropdown.option1")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-calendar"></i>@Messages("journeys.dropdown.option2")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-star"></i>@Messages("journeys.dropdown.option3")</a></li>
            </ul>
          </li>

When I select an option from the Journey Management dropdown, in this case the “Create Journey” page (it is the only page that has an action) the localhost address is http://localhost:9000/journeys 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.

Here is the source for the loaded page:

This is the HTML from the actual page

<div class="nav-collapse">
    <ul class="nav">
      <li class="active"><a href="/">Home</a></li>
      <li class=""><a href="/restricted">Restricted page</a></li>
      <li class=" dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="/journeys"><i class="icon-plus-sign"></i>Create a Journey</a>       </li>
          <li><a href="/TODO"><i class="icon-calendar"></i>View all Journeys</a></li>
          <li><a href="/TODO"><i class="icon-star"></i>View saved Journeys</a></li>
        </ul>`

Answer 1

So I foolishly neglected to include the “journeys” @main("Journey Creator", "journeys") { argument in the .scala.html file concerned in this question. Adding this resolving the navigation issue.