Displaying active navigation based on contextual data

Question

I have the following separated fragment in a Thymeleaf template.

<ul class="nav nav-tabs">     <li role="presentation"><a href="/">Freight Invoices</a></li>     <li role="presentation"><a href="/processed">Processed Invoices</a></li>     <li role="presentation"><a href="/postingrules">Posting Rules</a></li>     <li role="presentation" class="active"><a href="/settings">Settings</a></li> </ul> 

I want to add an "active" class to active navigation element — but it seems hard to accomplish in Thymyleaf. Any suggestions?

Answer 1

You can do this:

<ul class="nav navbar-nav">     <li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="@{/dashboard}"><span>Dashboard</span></a></li>     <li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="@{/orders}"><span>Orders</span></a></li>     <li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="@{/income}"><span>Income</span></a></li>     <li role="separator" ></li> </ul>