Creating Collapsible Bootstrap Navbars With jQuery - Responsive-collapse.js

Responsive-collapse.js is a jQuery plugin that automatically hides overflowing Bootstrap navbar items and shows them into a dropdown list on small screens.

How to use it:

1. Make sure you first have jQuery library and Bootstrap framework are loaded correctly in your html document.

<!-- jQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>

<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>

2. Load the jquery.responsive-collapse.css and jquery.responsive-collapse.js files in the document:

<link href="jquery.responsive-collapse.css" rel="stylesheet">
<script src="jquery.responsive-collapse.js"></script>

3. Create a Bootstrap navbar as follow:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="navbar-brand">WebSite Logo</a>
    </div>
    <div class="navbar-collapse collapse navbar-right">
            <ul class="nav navbar-nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item 3 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
            <li><a href="#">Item 3.4</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item 5 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Item 5.1</a></li>
            <li><a href="#">Item 5.2</a></li>
            <li><a href="#">Item 5.3</a></li>
            <li><a href="#">Item 5.4</a></li>
          </ul>
        </li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Profile</a></li>
            <li class="divider"></li>
            <li><a href="#">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

4. Call the function on the navbar list and done.

$('ul.navbar-nav').responsiveCollapse();

5. Specify the breakpoint at which screen size the overflowing nav items auto collapse into a dropdown list.

$('ul.navbar-nav').responsiveCollapse({
  breakPoint:       768
});

6. Customize the text for the dropdown list.

$('ul.navbar-nav').responsiveCollapse({
  overflowItemText: '<i class="fa fa-bars"></i> More <b class="caret"></b>'
});

Changelog:

2018-12-20

• Fix width calculations when navbar-header not present

2017-11-22

• Changed size() to length

---

This awesome jQuery plugin is developed by psyon. For more Advanced Usages, please check the demo page or visit the official website.