Responsive Collapsible Navbar In Vanilla JavaScript – Collapsible

Preview:

Description:

The Collapsible library automatically collapsible the nav items into a dropdown menu with a hamburger toggle button, when there’s not enough screen space.

Compatible with the latest Bootstrap 4 framework. Requires the ResizeSensor library for resize detection.

How to use it:

Create a navbar for your site.

<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>

Load the Collapsible.js library after ResizeSensor.js.

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

Load the DOM4 library for IE support (OPTIONAL).

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

Initialize the collapsible library and specify the minimum available space (in pixels) in the container.

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