title: Bootstrap 4 Tabs inside drop-down menu
body: <p>I am using boostrap 4 drop down menu with tabs inside. Here is the codepin
  I found this link useful to stop click event propagation so that the drop down menu does not close on click inside it<a href="https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside/25253002#25253002">Avoid dropdown menu close on click inside
  </a></p>
  
  <p><strong>But</strong> clicking on tabs does not work.
    code pin:<a href="https://codepen.io/elhaw/pen/JZjJpJ?editors=1010" rel="nofollow noreferrer">boostrap 4 tabs inside drop down menu</a></p>
  
  <pre><code>is there any solution or another approach so that tabs work inside drop down menu 
  </code></pre>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
  &lt;a class="navbar-brand" href="#"&gt;
       Navbar
  &lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
  &lt;/button&gt;
  &lt;div id="navbarNavDropdown" class="collapse navbar-collapse"&gt;
      &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;
                   Home
                  &lt;span class="sr-only"&gt;
                       (current)
                  &lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;
                   Features
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;
                   Pricing
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
              &lt;a id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                   Dropdown link
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
                  &lt;div class="container"&gt;
                      &lt;ul id="tabs" class="nav nav-tabs" role="tablist"&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab"&gt;
                                   &amp;ndash;A&amp;ndash;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab"&gt;
                                   &amp;ndash;B&amp;ndash;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab"&gt;
                                   &amp;ndash;C&amp;ndash;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div id="content" class="tab-content" role="tablist"&gt;
                          &lt;div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A"&gt;
                              &lt;div id="heading-A" class="card-header" role="tab"&gt;
                                  &lt;h5 class="mb-0"&gt;
                                      &lt;a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A"&gt;
                                           Collapsible Group Item A
                                      &lt;/a&gt;
                                  &lt;/h5&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A"&gt;
                                  &lt;div class="card-body"&gt;
                                      [Tab content A]
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B"&gt;
                              &lt;div id="heading-B" class="card-header" role="tab"&gt;
                                  &lt;h5 class="mb-0"&gt;
                                      &lt;a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B"&gt;
                                           Collapsible Group Item B
                                      &lt;/a&gt;
                                  &lt;/h5&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B"&gt;
                                  &lt;div class="card-body"&gt;
                                      [Tab content B]
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C"&gt;
                              &lt;div id="heading-C" class="card-header" role="tab"&gt;
                                  &lt;h5 class="mb-0"&gt;
                                      &lt;a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C"&gt;
                                           Collapsible Group Item C
                                      &lt;/a&gt;
                                  &lt;/h5&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C"&gt;
                                  &lt;div class="card-body"&gt;
                                      [Tab content C]
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <hr>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
  </code></pre>
  
  <hr>
  
  <p>Is there possible solution ?</p>