Trying to highlight the current element in the menu using Bootstrap and the "active" class, but unsure how to retrieve the value of the current page. Below is my navigation bar:
<nav class="navbar navbar-expand-md sticky-top navbar-light bg-faded">
<a class="nav-link waves-effect waves-light" th:href="@{/}">
<img class="home-logo" alt="UTL-2" th:src="@{/static/img/site-logo.png}" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul id="myDIV" class="navbar-nav mr-auto">
<li class="nav-item" th:classappend="${module == 'login' ? 'active' : ''}">
<a class="nav-link waves-effect waves-light" th:href="@{/login}">Login
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" th:classappend="${module == 'plan' ? 'active' : ''}">
<a class="nav-link waves-effect waves-light" th:href="@{/plan}">Plan for Shipment</a>
</li>
<li class="nav-item" th:classappend="${module == 'orders' ? 'active' : ''}">
<a class="nav-link waves-effect waves-light" th:href="@{/orders}">Orders</a>
</li>
<li class="nav-item" th:classappend="${module == 'stations' ? 'active' : ''}">
<a class="nav-link waves-effect waves-light" th:href="@{/stations}">Stations Directory</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" th:href="@{/partner}">Partners Directory</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" th:href="@{/map}">Map</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light" th:href="@{/info}">Information</a>
</li>
<li class="nav-item" sec:authorize="hasRole('ADMIN')">
<a class="nav-link waves-effect waves-light" th:href="@{/admin}">Admin Panel</a>
</li>
</ul>
<div id="logged-in-info">
<span sec:authorize="isAuthenticated()">Hello, <b sec:authentication="name">(Anonimous)</b></span>
<form sec:authorize="isAuthenticated()" method="post" th:action="@{/logout}">
<input type="submit" class="btn btn-light" value="Logout" />
</form>
<form sec:authorize="isAnonymous()" method="post" th:action="@{/login}">
<input type="submit" class="btn" value="Login" />
</form>
</div>
</div>
</nav>Attempting to use
th:classappend="${module == 'login' ? 'active' : ''}"P.S. Have explored Javascript solutions to mark the selected element as active, but they only work until the page is refreshed since each link leads to a new page, causing the menu item to lose its "active" status.