title: Bootstrap 3 RC2 Navbar with Multiple Collapses
body: <p>I'm trying to figure out how best i can get the following layout in Bootstrap 3 RC2.</p>
  
  <p>Where the left items are the primary nav UL, and the side icons, are an additional UL or just a set of links that share a common look, but provide a dropdown or hide/show toggle for their content (list for the group, but hoping to do an interactive search and cart display for the others).</p>
  
  <p>Currently, this plays fine when i do this code:</p>
  
  <pre><code>&lt;div class="nav-wrapper" style="height: 56px;"&gt;
          &lt;div class="nav-primary affix-top"&gt;
              &lt;nav class="navbar" role="navigation"&gt;
                  &lt;div class="container"&gt;
                      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                      &lt;div class="navbar-header"&gt;
  
  
                          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-primary-collapse"&gt;
                              &lt;span class="sr-only"&gt;Primary navigation&lt;/span&gt;
                              &lt;i class="icon-list"&gt;&lt;/i&gt;
                          &lt;/button&gt;
  
                          &lt;button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-cart-collapse"&gt;
                              &lt;span class="sr-only"&gt;Itinerary navigation&lt;/span&gt;
                              &lt;span class="icon-calendar-empty"&gt;&lt;/span&gt;
                          &lt;/button&gt;
  
                          &lt;button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-user-collapse"&gt;
                              &lt;span class="sr-only"&gt;User navigation&lt;/span&gt;
                              &lt;span class="icon-user"&gt;&lt;/span&gt;
                          &lt;/button&gt;
  
                          &lt;button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-search-collapse"&gt;
                              &lt;span class="sr-only"&gt;Search navigation&lt;/span&gt;
                              &lt;span class="icon-search"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
                          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                          &lt;div class="col-lg-8 col-sm-8 navbar-collapse navbar-primary-collapse in" style="height: auto;"&gt;
  
              &lt;ul id="navPrimary" class="nav navbar-nav"&gt;
  
          &lt;li class="first" id="navRegions"&gt;&lt;a href="/regions/"&gt;Regions&lt;/a&gt;&lt;/li&gt;
  
          &lt;li id="navWineries"&gt;&lt;a href="/wineries/"&gt;Wineries&lt;/a&gt;&lt;/li&gt;
  
          &lt;li id="navExplore"&gt;&lt;a href="/explore/"&gt;Explore&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="last" id="navEvents"&gt;&lt;a href="/events/"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt; 
                        &lt;/div&gt;&lt;!-- /.navbar-primary-collapse --&gt;
  
                          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                          &lt;div class="col-lg-4 col-sm-4 pull-right collapse navbar-collapse"&gt;
                              &lt;ul class="nav navbar-nav navbar-right"&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;div id="prime-nav-searchform" class="dropdown-menu"&gt;   &lt;form method="get" action="http://antonibotev.com/themes/nova/" class="search-form"&gt;
                                              &lt;i class="icon-search searchform-icon"&gt;&lt;/i&gt;
                                              &lt;input class="bluebox-search-input" type="text" name="s" value="Search..." onfocus="" onblur="" autocomplete="off" data-view-all-title="Show All Results" data-original-title=""&gt;
                                              &lt;input type="submit" class="submit" value="" onfocus="" onblur=""&gt;
                                              &lt;div class="search-form-autocomplete active"&gt;
                                                  &lt;div class="search-results-autocomplete"&gt;
  
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/form&gt;
                                      &lt;/div&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;  &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;How It Works&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Need Help?&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown"&gt;
                                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="icon-calendar-empty"&gt;&lt;/i&gt; &lt;span&gt;4&lt;/span&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;View Itinerary&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Check Out&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Need Help?&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
                      &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this works fine for the initial collapse, but i need additional ones, but currently they need to live in the same UL, which obviously makes an issue with creating the 3 other collapse divs. </p>
  
  <p>I even have the code to toggle the collapses if you say click on search or cart. It will only show you one at a time: opening one and closing the other</p>
  
  <pre><code>// mobile toggles - make sure when one navbar-collapse is open, that the others are closed
  $('.navbar-collapse').on('show.bs.collapse', function (e) {
      // hide open menus
      $('.navbar-collapse').each(function(){
          if ($(this).hasClass('in')) {
              $(this).collapse('toggle');
          }
      });
  });
  </code></pre>
  
  <p>The small and xs breakpoints should show the same layout, but of course replace the primary nav with an icon. Idea is that you have 4 icons to simply click or tap to toggle their respective menus, whether those menus contain a list or just a search form.</p>
  
  <p>Any suggestions?</p>