DEV Community

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

Posted on • Originally published at larainfo.com

3

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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 :)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more