I have a navigation menu with bootstrap, I use the blade templating engine and I have jquery +boostrap 4 in the layout.
The header I have is this
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a id="home" href="{{ route('front.user.pages.home') }}">Inicio</a></li>
<li><a id="perfil-usuario" href="{{ route('front.user.profile.show') }}">Perfil usuario</a></li>
</ul>
</nav><!-- .nav-menu -->
<a href="#about" class="get-started-btn scrollto">Empieza ya!</a>
</div>
And what I am trying to do is that when the user clicks on each of the buttons such as " Home " or " User Profile " which is still a link to a route, when the page loads leave the button marked as such .
The only way that I have achieved it that is probably the "worst" in terms of maintenance is by looking at the "URI" that I receive and if the uri matches some of the buttons, through jquery I add the class "active"
Something like that.
@php
if ($_SERVER['REQUEST_URI'] === '/perfil-usuario') {
$("#perfil-usuario").addClass("active");
}
@endphp
I wouldn't do the check in the example you've posted, it's not very optimal.
I leave you a possible solution, where you create a global function and then in your code (blade), you pass the route:
BLADE:
PHP: