wire:navigate

Livewire's wire:navigate feature makes page navigation much faster, providing an SPA-like experience for your users.

This page is a simple reference for the wire:navigate directive. Be sure to read the page on Livewire's Navigate feature for more complete documentation.

Below is a simple example of adding wire:navigate to links in a nav bar:

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

When any of these links are clicked, Livewire will intercept the click and, instead of allowing the browser to perform a full page visit, Livewire will fetch the page in the background and swap it with the current page (resulting in much faster and smoother page navigation).

#Styling active links with data-current

Livewire automatically adds a data-current attribute to any wire:navigate link that matches the current page URL. This allows you to style active navigation links using CSS or Tailwind without any additional directives:

<nav>
    <a href="/" wire:navigate class="data-current:font-bold">Dashboard</a>
    <a href="/posts" wire:navigate class="data-current:font-bold">Posts</a>
    <a href="/users" wire:navigate class="data-current:font-bold">Users</a>
</nav>

The data-current attribute is added and removed automatically as users navigate between pages. Read more about highlighting active links in the Navigate documentation.

#Prefetching pages on hover

By adding the .hover modifier, Livewire will pre-fetch a page when a user hovers over a link. This way, the page will have already been downloaded from the server when the user clicks on the link.

<a href="/" wire:navigate.hover>Dashboard</a>

#Going deeper

For more complete documentation on this feature, visit Livewire's navigate documentation page.

#See also

• Navigate — Complete guide to SPA navigation
• Pages — Create routable page components
• @persist — Persist elements during navigation

#Reference

wire:navigate

#Modifiers