Responsive Multi-level Navigation For Bootstrap 4 - k-responsive-menu

File Size: 967 KB
Views Total: 9383
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Multi-level Navigation For Bootstrap 4 - k-responsive-menu

k-responsive-menu is a simple, responsive, multi-level, cross-platform and mobile-friendly navigation jQuery plugin for Bootstrap 4 framework.

The plugin converts the normal horizontal or vertical Bootstrap 4 navigation into a multi-level dropdown or push menu on small devices.

More examples:

How to use it:

1. To use this plugin, you first need to load jQuery library and Bootstrap 4 framework in the html file.

<link rel="stylesheet" href="" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

2. Load the jQuery k-responsive-menu plugin's JavaScript and Stylesheet in the html file.

<link href="dist/css/k-responsive-menu.css" rel="stylesheet">
<script src="dist/js/k-responsive-menu.js"></script>

3. Create a multi-level Bootstrap navigation as these:

<header class="bg-light">
  <div class="k-menu-bar container">
    <div id="logo" class="mr-auto"></div>
    <button k-toggle-for="#example" class="k-button-toggle navbar-toggler">MENU</button>
  <div id="example" class="container">
    <div k-menu-map-to="#logo" class="k-logo navbar-brand">jQueryScript</div>
    <ul class="nav">
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item dropdown"><a id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
        <div aria-labelledby="navbarDropdown" class="dropdown-menu"><a href="#" class="dropdown-item">Action</a><a href="#" class="dropdown-item">Another action</a>
          <div class="dropdown-divider"></div><a href="#" class="dropdown-item">Something else here</a>
      <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>

4. Call the plugin on the Bootstrap navigation and done.


5. Set the menu type (horizontal or vertical).

  menuType: 'vertical' // default: horizontal

6. Add a custom icon to the trigger element.


  // uses Font Awesome
  menuIcon: '<i class="fa fa-bars"></i>'

7. Customize the animation speed when you toggle the navigation.


  // slow, fast, 200
  animationSpeed: 'slow'


8. Create an off-canvas push menu instead of dropdown.


  // right, left
  menuPush: null, 

  // fixed
  menuPushPosition: 'absolute', 

  // px, %, rem
  menuPushWidth: '100%',

  // shows background overlay
  menuBackDrop: false


9. Specify the breakpoint.


  // 'xs', 'sm', 'md', 'lg', 'xl', 480
  resizeWidth: 768


10. Whether to make the navigation float.


  menuFloat: true


11. Available event handlers.


  onResize: null,
  onComplete: null,
  onChange: null,
  onClick: null,
  onBegin: null,
  onHover: null




  • v4.0.1

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