DEV Community

Cover image for Laravel 9 Link Active Class Routes Example
saim
saim

Posted on • Originally published at larainfo.com

Laravel 9 Link Active Class Routes Example

In this section we will see how to use link active class routes in laravel 9. We will see active link routes in laravel with tailwind css and bootstrap 5.

Example 1

Laravel 9 simple active class link using request()->is('/') and ternary operator.



<li>
    <a href="/" class="{{ request()->is('/') ? 'text-blue-600':'' }}">Home</a>
</li>
<li>
    <a href="{{ route('vuejs') }}" class="{{ request()->is('vuejs') ? 'text-green-600':'' }}">Vue</a>
</li>


Enter fullscreen mode Exit fullscreen mode

laravel 9 with tailwind css navbar active links

Example 2

Using routeIs to create active current routes links.



<li>
    <a href="/" class="{{ request()->routeIs('/') ? 'text-blue-600':'' }}">Home</a>
</li>
<li>
    <a href="{{ route('vuejs') }}" class="{{ request()->routeIs('vuejs') ? 'text-green-600':'' }}">Vue</a>
</li>


Enter fullscreen mode Exit fullscreen mode

Example 3

You can also use laravel @class directive to active link class with tailwind css navbar links.



<li>
    <a href="{{ route('vuejs') }}" @class(['text-blue-600'=> request()->is('vuejs') ])>Test</a>
</li>


Enter fullscreen mode Exit fullscreen mode

Example 4

laravel 9 active routes links with bootstrap 5.



<li class="nav-item">
    <a class="nav-link {{ request()->routeIs('/') ? 'active':'' }}" aria-current="page" href="/">Home</a>
</li>


Enter fullscreen mode Exit fullscreen mode

If you Know more plz comment below.

Top comments (1)

Collapse
 
haamid profile image
Hamid Haghdoost

Thank you for such a great post. You can also use this package for having more features like wildcard activation and... Just give it a try :)