I have a bootstrap 5 navbar where user’s can add options to it.

The issue I am facing is that if they add ten or so option its starts to overflow.

I want it automatically to collaspe when it starts to overflow, simially the way it does when the screen gets too small.

It would also be great if it would be possible for some elements to always show.

Here is my navbar code

<nav class="navbar navbar-expand-sm navbar-dark" id="navbar">
    <div class="container-fluid" id="navbar-content">
      <a class="navbar-brand">Project X</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mynavbar">
        <ul class="navbar-nav" id="nav-spaces">
            <li class="nav-item"><a class="nav-link active" href="#" data-space-id="1">Default</a></li>
        </ul>
        <div class="ms-auto">
          <button class="btn btn btn-outline-light btn-lg ms-1" id="button-space" data-bs-toggle="modal" data-bs-target="#modal-spaces"><i class="fa-solid fa-pencil"></i> spaces</button>
          <button class="btn btn-outline-success btn-lg ms-1" id="button-login" data-bs-toggle="modal" data-bs-target="#modal-admin"><i class="fa-solid fa-user-lock"></i> Admin</button>
          <button class="btn btn-outline-success btn-lg ms-1" id="button-logout"><i class="fa-solid fa-right-from-bracket"></i> Logout</button>
          <button class="btn btn-outline-light btn-lg ms-1" id="button-hide-navbar"><i class="fa-solid fa-chevron-up"></i></button>
        </div>
      </div>
    </div>
  </nav>