title: Collapse a Sub-Menu within Bootstrap 5 Nav
body: <p>I would like to collapse the submenus within my dropdown. In this example, under General Management, the links under User Admin - is it possible to collapse/toggle that div? Effectively I would want a submenu that was directly under (vertically) but I can't figure that out either - Anything I do creates a pop-out menu to the right while I would like to keep it in the same vertical space. I hope that makes sense.</p>
  <p>Thanks in advance for your help!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navFont {
      font-size: 12px !important;
  }
  .navHeader {
      font-size: 12px !important;
      font-weight: bold !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div class="m-4"&gt;
    &lt;nav class="navbar navbar-expand-sm navbar-light bg-light"&gt;
      &lt;!---&lt;div class="container-fluid"&gt;---&gt;
        &lt;a class="nav-link navFont" aria-current="page" href="#"&gt;Home&lt;/a&gt;
        &lt;a class="nav-link navFont" aria-current="page" href="#"&gt;Committee Reviews&lt;/a&gt;
        &lt;!---Admin ---&gt;
        &lt;div class="dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle navFont" data-bs-toggle="dropdown"&gt;Admin&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;!---&lt;li&gt;&lt;h5 class="dropdown-header"&gt;Dropdown header 1&lt;/h5&gt;&lt;/li&gt;---&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;IRB Studies&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Waiting Triage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Waiting Full Board Review&lt;/a&gt;&lt;/li&gt;
              &lt;!---&lt;li&gt;&lt;h5 class="dropdown-header"&gt;Dropdown header 2&lt;/h5&gt;&lt;/li&gt;---&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Waiting Not Full Board Review&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--- End Admin---&gt;
         &lt;!---Reporting ---&gt;
        &lt;div class="dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle navFont" data-bs-toggle="dropdown"&gt;Reporting&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Run Reports&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Manage Reports&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;New Reports (11/18/2020)&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--- End Reporting---&gt;
        &lt;!--- General Management---&gt;
        &lt;div class="dropdown"&gt;
          &lt;a href="#" class="nav-link dropdown-toggle navFont" data-bs-toggle="dropdown"&gt;General Management&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;!--&lt;li&gt;&lt;h5 class="dropdown-header"&gt;Dropdown header 1&lt;/h5&gt;&lt;/li&gt;---&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Manage Submissions&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;Manage Committees&lt;/a&gt;&lt;/li&gt;
              &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
              &lt;li&gt;&lt;h5 class="dropdown-header navHeader"&gt;Users &amp; Admin&lt;/h5&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;User Access&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item navFont" href="#"&gt;IRB Admin&lt;/a&gt;&lt;/li&gt;
              &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
              &lt;li&gt;&lt;h5 class="dropdown-header navHeader"&gt;Letters &amp; Templates&lt;/h5&gt;&lt;/li&gt;
              
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--- End General Management---&gt;
      &lt;!---&lt;/div&gt;---&gt;
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://cdml.w3spaces.com/saved-from-Tryit-2022-06-21-accq3.html" rel="nofollow noreferrer">Code</a></p>