Laravel 11 Livewire 3 wire:current - Active Link

In this quick guide, I’ll show you how to highlight the active link in your menu using wire:current in Laravel 11 with Livewire 3. It’s super useful for navigation and doesn’t require custom logic or JavaScript. Just add one directive, and Livewire handles the rest.

What is wire:current?

wire:current is a Livewire 3 directive that checks if a link’s destination matches the current Livewire route. If it does, you can apply a style, class, or condition to show the user which page they’re on.

Setup Example: Livewire SPA-Style Navigation

Create Routes in web.php

use App\Livewire\Home;
use App\Livewire\Contact;

Route::get('/', Home::class)->name('home');
Route::get('/contact', Contact::class)->name('contact');

Create the Livewire Pages

php artisan make:livewire Home
php artisan make:livewire Contact

Shared Navigation Component

Let’s say we have a navigation menu in a shared Blade partial or component:

<!-- resources/views/components/nav.blade.php -->
<nav class="flex gap-4">
    <a 
        href="{{ route('home') }}" 
        wire:navigate 
        wire:current.class="text-blue-600 font-bold"
    >
        Home
    </a>
    <a 
        href="{{ route('contact') }}" 
        wire:navigate 
        wire:current.class="text-blue-600 font-bold"
    >
        Contact
    </a>
</nav>

More wire:current Options

You can also use other modifiers:

wire:current.attr

Add an HTML attribute conditionally if the link is current.

<a 
    href="{{ route('home') }}" 
    wire:navigate 
    wire:current.attr="aria-current"
>
    Home
</a>

If current, it renders:

<a href="/" aria-current>Home</a>

wire:current.remove

Remove a class if the route is not active.

<a 
    href="{{ route('home') }}" 
    wire:navigate 
    class="text-gray-500"
    wire:current.remove.class="text-gray-500"
>
    Home
</a>

This keeps the default gray, but removes it when the link is active.

You might also like:

• Read Also: Laravel 11 Livewire 3 wire:navigate - Navigate Page
• Read Also: Laravel 11 Livewire 3 Pagination Example
• Read Also: Laravel 11: when Blade Directive Example
• Read Also: Laravel 8 cURL HTTP Request Example