Best 74 jQuery Menus
Collection of free jQuery menu code examples and plugins to use in your website.
Collection
Simple jQuery Slide Menu
Author: P.S.Blakemore
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Very simple jQuery slide menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Animated Menu
Author: pulkit-jasti
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Animated CSS menu with little jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Just Another Nav
Author: Eric Porter
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Menu Effect
Author: Ivan Grozdic
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
Hamburger Menu Interaction
Author: Tsukasa Aoki
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Placed hamburger menu in the bottom right corner.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Pasta Menu (GSAP Animation)
Author: Olivia Ng
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Pasta shapes really serve well as menu icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: simple-line-icons.css, gsap.js, splitting.js
Full Screen Nav
Author: Kyle Shook
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.js
Full Screen Menu
Author: CodeMeNatalie
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Full Page Nav Hand Grab
Author: Zed Dash
Links: demo and code
Made with: HTML (Pug) / CSS (SCSS) / JS (TypeScript)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Full-Page Navigation
Author: Thomas Vaeth
Links: demo and code
Made with: HTML / CSS (SCSS) / JS (Babel)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: anime.js
Full Page Nav
Author: Adam Kuhn
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
jQuery full page navigation.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: splitting.js, gsap.js
Sliding Page Navigation
Author: Zed Dash
Links: demo and code
Made with: HTML (Pug) / CSS (SCSS) / JS (TypeScript)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Nav Concept
Author: Tobias Glaus
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Slidey Nav
Author: Eric Porter
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Mobile Nav Bar
Author: Shosuke Doi
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Uber-like Navigation
Author: creme
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js, tweenmax.js
Responsive Menu Scroll Left
Author: Jessica Valeska da Silva
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Droplet Menu Animation
Author: Leon Heess
Links: demo and code, dribbble shot
Made with: HTML / CSS / JS
Droplet scroll animation for the hamburger menu in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Menu with Morphing Shapes
Author: Dejan Babić
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
jQuery menu with morphing shapes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js
Menu
Author: Yiting Liu
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Horizontal jQuery menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Expanding and Collapsing Hamburger Menu
Author: Jon Wilcox
Links: demo and code
Made with: HTML / CSS (Less) / JS
Experimenting with making the menu items themselves collapse into the bars of the hamburger menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Hamburger Menu
Author: rv7
Links: demo and code
Made with: HTML / CSS / JS
CSS and jQuery hamburger menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Navigation
Author: Giorgio Acquati
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Mobile Navigation
Author: Dejan Babić
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Mobile navigation animation using GSAP.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js
Radial Menu
Author: Praveen Kumar Gorakala
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Radial menu - creator visons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, jquery.js, font-awesome.js
Multi-level Side Nav Menu
Author: Aaron Awad
Links: demo and code
Made with: HTML / CSS / JS
This is a multi-level side navigation pattern with hover and push. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Slide Out Navigation Menu
Author: Praveen Bisht
Links: demo and code
Made with: HTML (Pug) / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Menu Interaction
Author: Dronca Raul
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js, feather.js
Burger Menu
Author: Aaron Taylor
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
This is a burger menu for an upcoming project I am working on. I have tried to focus on the animations to give that polished feel when you open the menu item.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Mobile Dropdown Menu
Author: Dogacan
Links: demo and code
Made with: HTML (Pug) / CSS (Sass) / JS
Mobile dropdown menu example with keyframe animations and transitions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Fancy Toggle Menu
Author: Florian Guiffrey
Links: demo and code
Made with: HTML / CSS / JS
A fancy toggle menu to edit quickly posts on websites.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
NavMenu
Author: Mitchell Swaffield
Links: demo and code
Made with: HTML / CSS / JS
Expandble/collapsable navigational menu with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Fullscreen Menu with Flexbox & jQuery
Author: veronika
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Dropdown Menu jQuery
Author: naymapl
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Hamburger Slide Accordion Menu
Author: Anya Melnyk
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Circular Navigation Concept
Author: Benedict
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
A new navigation concept.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Apple Menu Search Animation
Author: uros
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Apple website menu search animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, animate.css
Real Fullscreen Navigation
Author: Em Ji Madhu
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
A full viewport responsive navigation with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
jQuery Staggered Animation Dropdown Menu
Author: Boomer
Links: demo and code
Made with: HTML / CSS (Sass) / JS
This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu. Rather than applying the delay in CSS/SASS files based on nth-child(), we inject the delay via jQuery on document ready. This pattern can be used in a render function for Meteor or within Angular/React. This could be done at mouseenter(), but there could be a JavaScript delay in relation to instant CSS hover. By having it in the page render, it ensures it up to date whenever the user hovers. The function simply counts the number of children in the dropdown menu and applies a delay based on it's index value within the loop. If you have dropdown headers, dividers or links, you'll need to update it to traverse the DOM. Easiest way is by console.log(index) within the each funciton to ensure it's counting the children properly.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Animated Navigation
Author: Greg Hovanesyan
Links: demo and code
Made with: HTML / CSS / JS
Animated mobile navigation created in JavaScript using Greensock.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tweenmax.js
Floating Circular Menu
Author: Mahmoud
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Fixed Navigation Sidebar
Author: Boomer
Links: demo and code
Made with: HTML / CSS (Sass) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, linearicons.js, bootstrap.js
Diagonal Mega Menu
Author: Tim Normington
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js, jquery-ui.js, tweenmax.js
Multi-Device Scrolling Menu
Author: Alberto
Links: demo and code
Made with: HTML / CSS / JS
A simple responsive horizontal menu ready for any device. For the sample only the background colour will change between countries.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, jquery-ui.js
Flexbox Overlay Navigation
Author: Mirko Zorić
Links: demo and code
Made with: HTML / CSS / JS
Velocity.js fullscreen Flexbox overlay navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: velocity.js, velocity.ui.js
A Clean Navigation Slider
Author: Roemerdt
Links: demo and code
Made with: HTML (Pug) / CSS (SCSS) / JS (CoffeeScript)
This is a very clean navigation with a cool slider in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Secret UI Project
Author: Mohan Khadka
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: ionicons.css, animate.css
Responsive Mega Dropdown
Author: James Mejia
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Original problem was having to create a mega dropdown that was responsive. The design required each column to have a border and have chunks of links inside of that. This is a mobile-first solution that gives you markup that makes sense for mobile/desktop using data attributes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.css, jquery.js, enquire.js
Dota 2 Wheel Chat
Author: Timofey
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
With this module, you can create wheel menu, like such in Dota 2 game. Press left mouse button, to see it. Choose one of menu items, to say something to your teammates!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js, wheel-menu.js
Circular Layered Menu
Author: Andrey Pokrovskiy
Links: demo and code
Made with: HTML / CSS (Less) / JS
Circular, vinyl-like menu with explanatory label that pop when icons are hovered.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js, tweenmax.js
Lastik Menu
Author: Chrysto
Links: demo and code
Made with: HTML / CSS / JS
Simple lava-lamp like horizontal menu, using jQuery and Tweenmax.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js, tweenmax.js
Hiraku.js
Made by: appleple
Github activity: 65 stars; 12 watchers
Links: demo, github page
Hiraku.js - jQuery offcanvas menu plugin.
Sidebar Menu
Made by: huang.xinghui
Github activity: 42 stars; 4 watchers
Links: demo, github page
Sidebar menu jQuery component base on AdminLTE.
Slide And Swipe Menu
Made by: Joan Claret
Github activity: 96 stars; 12 watchers
Links: demo, github page
A sliding swipe menu that works with touchSwipe library.
Drawer
Made by: Yasuyuki Enomoto
Github activity: 477 stars; 29 watchers
Links: demo, github page
Flexible drawer menu using jQuery, iScroll and CSS.
Slinky
Made by: Ali Zahid
Github activity: 430 stars; 20 watchers
Links: demo, github page
A light-weight, responsive, mobile-like navigation menu plugin.
Tendina
Made by: Ivan Prignano
Github activity: 139 stars; 15 watchers
Links: demo, github page
Tendina is a simple jQuery plugin that helps you build dynamic, interactive side-menus in seconds.
Bootstrap Submenu
Made by: Vasilii Artemchuk
Github activity: 343 stars; 40 watchers
Links: demo, github page
Bootstrap sub-menus.
stickyNavbar.js
Made by: Jozef Butko
Github activity: 278 stars; 17 watchers
Links: demo, github page
StickyNavbar.js: fancy sticky navigation jQuery plugin with smart anchor links highlighting.
Box Lid Menu
Made by: James Lim
Github activity: 43 stars; 9 watchers
Links: demo, github page
This jQuery plugin creates the box lid effect for navigation menus.
stickUp
Made by: Liran Cohen
Github activity: 1531 stars; 100 watchers
Links: github page
StickUp a jQuery Plugin for sticky navigation menus.
scrollNav
Made by: Jimmy Wilson
Github activity: 394 stars; 25 watchers
Links: demo, github page
A jQuery plugin for building a scrolling navigation menu.
bigSlide.js
Made by: Adam Scott
Github activity: 392 stars; 19 watchers
Links: demo, github page
bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.
offCanvasMenu
Made by: Cloud Four
Github activity: 150 stars; 13 watchers
Links: github page
offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.
Metismenu
Made by: Osman Nuri Okumuş
Github activity: 1508 stars; 106 watchers
Links: demo, github page
A jQuery menu plugin.
jQuery Superfish Dropdown Menu Plugin
Made by: Joel Birch
Github activity: 856 stars; 84 watchers
Links: demo, github page
Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.
SlickNav
Made by: Josh
Github activity: 824 stars; 66 watchers
Links: demo, github page
Responsive mobile menu jQuery plugin.
SmartMenus
Made by: Vasil Dinkov
Github activity: 478 stars; 51 watchers
Links: demo, github page
Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.
SlimMenu
Made by: Adnan Topal
Github activity: 299 stars; 34 watchers
Links: demo, github page
SlimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
jQuery.Dropotron
Made by: aj
Github activity: 123 stars; 15 watchers
Links: github page
jquery.dropotron: multilevel dropdown menus for jQuery.
Sidr
Made by: Alberto Varela
Github activity: 2921 stars; 154 watchers
Links: demo, github page
Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. It uses CSS3 transitions in modern browsers and fallbacks into jQuery.animate when they are not supported.
Fixed Table of Contents Drop-Down Menu jQuery Plugin
Made by: Louis Lazaris
Github activity: 53 stars; 0 watchers
Links: demo, github page
A fixed table of contents drop-down menu jQuery plugin. Just change the markup to add more depth to the menus. The script should automatically recognize deeper menus, as long as you have the corresponding sections in the content area.
jPanelMenu
Made by: Anthony Colangelo
Github activity: 956 stars; 86 watchers
Links: demo, github page
A jQuery plugin that creates a paneled-style menu.
visualNav
Made by: Rob Garrison
Github activity: 68 stars; 8 watchers
Links: demo, github page
A jQuery plugin that modifies a navigation menu to highlight/change when the menu's target smooth scrolls into view.
