javascriptphplaravelbootstrap-5laravel-livewire

Dropdowns stop working using Livewire and wire:navigate

I'm using Livewire components integrated with the botstrap 5.3 navbar. Everything works fine but, when I add wire:navigate to the links in the navbar, all interactive elements stop working. There are no errors in the console. navbar toggle, dropdowns, everything stops working.

here's the dropdown menu example

<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="{{route('home')}}" wire:navigate>Home</a></li>
    <li><a class="dropdown-item" href="{{route('about')}}" wire:navigate>About</a></li>
    <li><a class="dropdown-item" href="{{route('contacts')}}" wire:navigate>Contacts</a></li>
  </ul>
</div>

Anyone to help me please

Solution

  • add data-navigate-once to all your javascript on the page

    <script data-navigate-once src="{{ url('/') }}/assets/js/app.js"></script>