title: Bootstrap 5 navbar dropdown-menu leaves screen
body: <p>I have a menu that is aligned to the right. The last menu is a dropdown menu. But the dropdown menu items doesn't stay on the screen. Half of it leaves the screen. I have been googling but I can't find the class that kepps it on screen.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-md navbar-light bg-light&quot;&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;ms-auto order-0&quot;&gt;
        &lt;a class=&quot;navbar-brand mx-auto&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;./img/BMB-logo.svg&quot; width=&quot;75&quot; height=&quot;75&quot;&gt;&lt;/a&gt;
        &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.dual-collapse2&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;navbar-collapse collapse w-100 order-3 dual-collapse2&quot;&gt;
          &lt;ul class=&quot;navbar-nav ms-auto&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Right&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
                      &lt;i class=&quot;fas fa-user&quot;&gt;&lt;/i&gt;
                  &lt;/a&gt;
                  &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>