Bootstrap выпадающий разделить тогл на navbar

Question

вот кусок кода моего navbar:

<li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="login-form.php" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Accedi
              </a>
              <div class="dropdown-menu" id="loginForm" aria-labelledby="navbarDropdown">
                <form class="px-4 py-3" action="login.php" method="post">
                  <div class="form-group">
                    <label>Username:</label>
                    <input type="text" name="post_username" class="form-control" placeholder="Inserisci username" required>
                    <label class="mt-2">Password:</label>
                    <input type="password" name="post_password" class="form-control" placeholder="Password" required>
                  </div>
                  <button type="submit" class="btn btn-danger float-right">Accedi</button>
                </form>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="registration-form.php">Registrati</a>
            </li>

Noi У меня есть ссылка с именем «Accedi», где я хочу кнопку, которая ссылается на страницу login-form.php и tooglerЭто выпадающая небольшая форма для входа в систему в панели навигации.

как мне достичь своей цели?