I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be effective. My current setup involves Vue.js along with Bootstrap.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<div class="navbar-brand mb-0 h1">กำหนดมาตรฐานบุคลากรทั่วไป</div>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/home" class="nav-link">Home</router-link>
</li>
<!-- Dropdown ระดับ 1 -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<router-link to="/service1" class="dropdown-item">Service 1</router-link>
<router-link to="/service2" class="dropdown-item">Service 2</router-link>
<!-- Dropdown ระดับ 2 -->
<li class="nav-item dropdown">
<a
class="dropdown-item dropdown-toggle"
href="#"
id="nestedDropdown"
role="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
More Services
</a>
<div class="dropdown-menu" aria-labelledby="nestedDropdown">
<router-link to="/service3" class="dropdown-item">Service 3</router-link>
<router-link to="/service4" class="dropdown-item">Service 4</router-link>
</div>
</li>
</div>
</li>
</ul>
</div>
</nav>