A Responsive jQuery Dropdown Navigation Menu

The jquery menu is a fully responsive, mobile-friendly, multi-level dropdown menu is written in JavaScript (jQuery) and CSS / CSS3.


  • It allows you to add menu items dynamically via JavaScript.
  • It reveals sub-menus when hovering over parents.
  • Converts the dropdown menu into a vertical accordion menu in mobile view.
  • Easy to customize with your own CSS.

Must Read: Responsive Fancy Sidebar Navigation Menu With Icons

How to make use of it:

1. Load the jQuery library and Material Icon within the document.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Load the Dropdown Navigation’s JavaScript and Stylesheet.

<link rel="stylesheet" href="dist/style.css" />
<script src="app.js"></script>

3. Define your menu objects in a JS array as displayed below.

let menuList = [
        title: "Home",
        url: "#"
        title: "About",
        url: "#"
        title: "SubMenu",
        url: "#"
        title: "SubMenu-1",
        url: "#"
        title: "SubMenu-1-1",
        url: "#"
        title: "SubMenu-1-2",
        url: "#"
        title: "SubMenu-2",
        url: "#"
        title: "Contact",
        url: "#"

4. Code the HTML structure for the dropdown navigation.

  <nav class="sd-nav-menu">
    <div class="sd-menu-header">
      <div class="sd-desktop-menu">
      <button class="sd-menu-toggle">
        <i class="material-icons">menu</i>
    <div class="sd-mobile-menu">

5. Initialize the plugin of the menu checklist to the dropdown navigation.

let $ = jQuery;

See Demo And Download

Official Website(Cover-UI): Click Here

This superior jQuery/javascript plugin is developed by Cover-UI. For extra Advanced Usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


Simple Web-Rich Text Editor That Can Export HTML

Rich Text Editor is a simple HTML export web text editor developed with the jQuery library, Bootstrap framework, and the iconic Font Awesome font. Editor Buttons: Undo…


Modal Dialog Box Plugin Based On jQuery | cxDialog

cxDialog is a jQuery-based dialog plugin that supports custom appearance styles, is Zepto compatible, and is suitable for portable use. This jQuery plugin is used to generate…


Markdown Editor Based On The Ace And Bootstrap Editor | codeparlMarkdown

Bootstrap Markdown Editor is a jQuery plugin that helps you create a full-featured, customizable tag editor with Bootstrap, Ace Editor, Font Awesome, and Showdown.js. Requirements Bootstrap 4…