title: subNavigation bar to the mainnavigation
body: <p>I have a html file , which produces the following output</p>
  <p><a href="https://i.stack.imgur.com/SUjKN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SUjKN.png" alt="Navigation bar" /></a></p>
  <p>Now when I click on the products, I want to show a grey subbar with horizontal options containing ProductList.
  <a href="https://i.stack.imgur.com/Bqzbl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bqzbl.png" alt="sub nav bar" /></a></p>
  <p>Similarly, if Shops are clicked, dynamically it should only show ShopList.</p>
  <p>I have the html file for navbar.html</p>
  <pre><code>&lt;!doctype html&gt;
    &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;!-- Required meta tags --&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
        &lt;!-- Bootstrap CSS --&gt;
        &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; 
        rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id=&quot;navbarFragment&quot;&gt;
        &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-primary&quot;&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;&quot;&gt;BRAND&lt;/a&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; 
            data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarTogglerDemo02&quot; 
            aria-controls=&quot;navbarTogglerDemo02&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarTogglerDemo02&quot;&gt;
          &lt;ul class=&quot;navbar-nav mr-auto mt-2 mt-lg-0&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;subnav.html#subnav&quot;&gt;Products&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;Shops&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;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      
    &lt;/div&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; 
    integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>subnav.html</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;!--insert navigation bar here--&gt;
      &lt;div id=&quot;subnav&quot;&gt;
          &lt;nav id=&quot;navbar-nav ms-auto&quot; class=&quot;navbar navbar-dark bg-light navbar-expand-lg&quot; &gt;
              &lt;ul class=&quot;navbar-nav ms-auto&quot;&gt;
                 &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Project list&lt;/a&gt;&lt;/li&gt;&gt;&lt;/li&gt; &lt;!-- this has to be generic--&gt;
                 &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;&gt;&lt;/li&gt;    
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Currently when I click the products, it shows the below :</p>
  <p><a href="https://i.stack.imgur.com/BCGDb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BCGDb.png" alt="output" /></a></p>
  <p>Any guidance will be useful.
  PS: total beginner</p>