collapsible.js | Creating Responsive Collapsible Navigation with JavaScript

collapsible.js is a JavaScript responsive menu library, we can use it create a dropdown menu. This plugin is compatible with the Bootstrap 4 framework.

How to create a dropdown menu using collapsible.js?

1.Create a navigation in html page

<div id="navbar-first" class="navbar navbar-lg no-padding no-box-shadow sk-big-navbar navigation-bar">
  <ul class="nav navbar-nav nav-tabs nav-tabs-bottom bottom-divided no-margin">
      <li><a href="#">Home</a></li>
      <li><a href="#"Item 1</a></li>
      <li><a href="#"Item 2</a></li>
      <li><a href="#"Item 3</a></li>
      <li><a href="#"Item 4</a></li>
      <li><a href="#"Item 5</a></li>
      <li><a href="#"Item 6</a></li>
      <li><a href="#"Item 7</a></li>
      <li><a href="#"Item 8</a></li>
      <li><a href="#"Item 9</a></li>
      <li><a href="#"Item 10</a></li>
      ...
  </ul>
</div>

2.Import ResizeSensor.js and collapsible.js

<script src="https://cdn.jsdelivr.net/npm/ResizeSensor.min.js"></script>
<script src="./dist/collapsible.js"></script>

3. Import dom4.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"></script>

5.Initialize the collapsible library using a html element class, for example:.navbar-nav

var collapsible = new Collapsible('.navbar-nav', 200);
collapsible.render();