wire:current | Add Style on Current Active Link in Laravel Livewire 3 | EP 15

By Hardik Savani February 11, 2025 Category : Laravel Laravel Livewire

In this post, I will show you how to use wire current with wire:navigate html directive with laravel livewire 3.

The wire:current directive makes it easy to detect and style the active links on a page. In this example, We will use the `wire:current` directive to add an active class based on the URL. It will highlight the current menu item. This makes it easy to add the active class automatically. let's see the example:

resources/views/theme/default.blade.php

<nav>
    <a href="/" wire:current="active" wire:navigate>Dashboard</a>
    <a href="/posts" wire:current="active" wire:navigate>Posts</a>
    <a href="/users" wire:current="active" wire:navigate>Users</a>
</nav>

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now, you need to register user and go to dashboard:

Output:

I hope it can help you...

Shares