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

Creating Collapsible Bootstrap Navbars With jQuery - Responsive-collapse.js
File Size: 7.26 KB
Views Total:
Last Update: 12/20/2018 05:48:00 UTC
Publish Date: 12/26/2016 04:54:58 UTC
Official Website: Go to website
License: MIT

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="//"></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 href="#" class="navbar-brand">WebSite Logo</a>
    <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>
        <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>
        <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>

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


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

  breakPoint:       768

6. Customize the text for the dropdown list.

  overflowItemText: '<i class="fa fa-bars"></i> More <b class="caret"></b>'



  • Fix width calculations when navbar-header not present


  • Changed size() to length