How to fix Bootstrap 5 Dropdown didnt work after wire:navigate page?

[ilhamprabuzakys]

2023-12-12.08-59-20.mp4

I've bootstrap 5 navbar and on the menu item there's dropdown element. It's work on the initial load.
But after I navigate to other page and click the dropdown again.
The dropdown stopped working. I need to navigate to another page, and click it again to make it work.

I'm using Livewire 3 and Laravel 10.

I've done some research that said I need to reinitialize Bootstrap after navigating with Livewire.

Like this :

`document.addEventListener('livewire:navigated', () => {
console.log('Livewire navigated.');
initDropdown();
});

function initDropdown() {
try {
let myDropdown = document.querySelector('#dropdown-indeks');
new bootstrap.Dropdown(myDropdown);
console.log('initDropdown');
} catch (error) {
console.error('Theres some error:', error);
}
}`

But unfortunately it didnt work at all. Please help me guys

[snoeDev]

Add data-navigate-once to your Bootstrap JS. It works for me

<script data-navigate-once src="bootstrap.js"></script>

[allphptricks]

Your solution worked very well, thanks

[antoniuspj]

just faced the same issue, and it works. thank you bro!

[mbilalshafiq9]

Thanks, It worked

[Thirumalai15]

Thanks, It worked for me!!
I am using tabler UI dashboard

[infinitietech05]

Thanks, man. It worked for me as well.

[edulazaro]

You can wrap the heading using the @persist tag, like:

@persist('nav')
<!-- Your nav code here -->
@endpersist

This way, it will only be rendered once across all renders when using wire:navigate.