Collection
Post cover
Created 4 month back

Best 74 jQuery Menus

Collection of free jQuery menu code examples and plugins to use in your website.

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

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

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

Post cover

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.

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

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

Post cover

Metismenu

Made by: Osman Nuri Okumuş

Github activity: 1508 stars; 106 watchers

Links: demo, github page

A jQuery menu plugin.

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

Post cover

jQuery.Dropotron

Made by: aj

Github activity: 123 stars; 15 watchers

Links: github page

jquery.dropotron: multilevel dropdown menus for jQuery.

Post cover

jPanelMenu

Made by: Anthony Colangelo

Github activity: 956 stars; 86 watchers

Links: demo, github page

A jQuery plugin that creates a paneled-style menu.

Post cover

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.

Post cover

Slinky

Made by: Ali Zahid

Github activity: 430 stars; 20 watchers

Links: demo, github page

A light-weight, responsive, mobile-like navigation menu plugin.

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

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

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

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

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

Post cover

Sidebar Menu

Made by: huang.xinghui

Github activity: 42 stars; 4 watchers

Links: demo, github page

Sidebar menu jQuery component base on AdminLTE.

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

Nav Concept

Author: Tobias Glaus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Post cover

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.

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

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

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

Post cover

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.

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

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

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

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

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

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 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

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

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

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

Post cover

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.

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

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

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

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

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

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

Dropdown Menu jQuery

Author: naymapl

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

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

Slidey Nav

Author: Eric Porter

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

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

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

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

Post cover

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.

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

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

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

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

Post cover

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.

Post cover

Hiraku.js

Made by: appleple

Github activity: 65 stars; 12 watchers

Links: demo, github page

Hiraku.js - jQuery offcanvas menu plugin.

Full Screen Menu

Author: CodeMeNatalie

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Post cover

SlickNav

Made by: Josh

Github activity: 824 stars; 66 watchers

Links: demo, github page

Responsive mobile menu jQuery plugin.

Hamburger Slide Accordion Menu

Author: Anya Melnyk

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Post cover

stickUp

Made by: Liran Cohen

Github activity: 1531 stars; 100 watchers

Links: github page

StickUp a jQuery Plugin for sticky navigation menus.

Post cover

Drawer

Made by: Yasuyuki Enomoto

Github activity: 477 stars; 29 watchers

Links: demo, github page

Flexible drawer menu using jQuery, iScroll and CSS.

Post cover

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.

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

Post cover

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.

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

Post cover

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.

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

Just Another Nav

Author: Eric Porter

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Post cover

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.

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

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

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

Post cover

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.

Post cover

Bootstrap Submenu

Made by: Vasilii Artemchuk

Github activity: 343 stars; 40 watchers

Links: demo, github page

Bootstrap sub-menus.

Post cover

scrollNav

Made by: Jimmy Wilson

Github activity: 394 stars; 25 watchers

Links: demo, github page

A jQuery plugin for building a scrolling navigation menu.

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback