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>