DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

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 (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.