After setting up a pre-configured navbar from the Bootstrap website, I noticed that the dropdown feature is not working. This issue arose with the latest version of Bootstrap 5.2 which was integrated into my Laravel project without any modifications to the code. Why is the dropdown toggle not functioning as expected?
I have included a screenshot showcasing the dropdown menu
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ url('dashboard') }}">Dashboard</a>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
I have explored various online resources in search of a resolution to this issue.