Laravel 11 Livewire 3 wire:navigate - Navigate Page

In this guide, I’ll show you how to use wire:navigate in Laravel 11 with Livewire 3 to switch pages without a full reload. It feels like a Single Page Application (SPA), but you don’t need Vue or React. Just Livewire.

I’ll walk you through it step by step with clean and simple code examples.

Laravel 11 Livewire 3 wire:navigate – Navigate Without Reload

Make sure you have:

• Laravel 11 installed

• Livewire 3 installed and configured

• Routes and views ready

If you don’t have Livewire 3:

composer require livewire/livewire

Then add Livewire scripts to your layout:

<!-- In your main layout -->
@livewireStyles
@livewireScripts

Define Routes in web.php

use App\Livewire\Home;
use App\Livewire\About;

Route::get('/', Home::class)->name('home');
Route::get('/about', About::class)->name('about');

Create the Livewire Pages

php artisan make:livewire Home
php artisan make:livewire About

Update their render methods:

// app/Livewire/Home.php
public function render()
{
    return view('livewire.home');
}

// app/Livewire/About.php
public function render()
{
    return view('livewire.about');
}

Add wire:navigate Links in Blade

<!-- resources/views/livewire/home.blade.php -->
<div>
    <h1>Welcome to Home</h1>
    <a href="{{ route('about') }}" wire:navigate>Go to About Page</a>
</div>

<!-- resources/views/livewire/about.blade.php -->
<div>
    <h1>This is About Page</h1>
    <a href="{{ route('home') }}" wire:navigate>Back to Home</a>
</div>

That’s it. When you click the link, it navigates instantly without a full reload.

Add Active Link Style

You can use request()->routeIs() to highlight the active page.

<a 
    href="{{ route('about') }}" 
    wire:navigate 
    class="{{ request()->routeIs('about') ? 'text-blue-600 font-bold' : '' }}">
    About
</a>

Note:

• wire:navigate only works on Livewire-powered pages.

• Works best when your views are full Livewire components, not traditional Blade-only pages

You might also like:

• Read Also: Laravel 11 Livewire 3 wire:loading - Add Loading
• Read Also: Laravel 10 Create AJAX Pagination Example
• Read Also: Laravel 10 AJAX Form Validation Example
• Read Also: Laravel 10 Send Bulk Mail Using Queue