Collection of free jQuery menu examples and plugins. Update of November 2019 collection. 32 new examples.

  1. jQuery Context Menus
  2. jQuery Fullscreen Menus
  3. jQuery Mega Menus
  4. jQuery Off-Canvas Menus
  5. jQuery Sliding Menus
  6. jQuery Scrolling Menus
  1. jQuery Menu Examples
  2. jQuery Menu Plugins

jQuery Menu Examples

Creator

  • P.S.Blakemore

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Simple jQuery Slide Menu

Very simple jQuery slide menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • pulkit-jasti

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Animated Menu

Animated CSS menu with little jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Eric Porter

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Just Another Nav

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Ivan Grozdic

Programming language

  • HTML / CSS / JS

Information a code

Menu Effect

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Creator

  • Tsukasa Aoki

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Hamburger Menu Interaction

Placed hamburger menu in the bottom right corner.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Olivia Ng

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Pasta Menu (GSAP Animation)

Pasta shapes really serve well as menu icons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: simple-line-icons.css, gsap.js, splitting.js

Creator

  • Justin Danks

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Scroll Nav

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Kyle Shook

Programming language

  • HTML / CSS / JS

Information a code

Full Screen Nav

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.js

Creator

  • CodeMeNatalie

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Full Screen Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Zed Dash

Programming language

  • HTML (Pug) / CSS (SCSS) / JS (TypeScript)

Information a code

Full Page Nav Hand Grab

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Thomas Vaeth

Programming language

  • HTML / CSS (SCSS) / JS (Babel)

Information a code

Full-Page Navigation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

Creator

  • Adam Kuhn

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Full Page Nav

jQuery full page navigation.

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: splitting.js, gsap.js

Creator

  • Zed Dash

Programming language

  • HTML (Pug) / CSS (SCSS) / JS (TypeScript)

Information a code

Sliding Page Navigation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Tobias Glaus

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Nav Concept

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Eric Porter

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Slidey Nav

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Joshua Ward

Programming language

  • HTML (Pug) / CSS (SCSS) / JS

Information a code

One Page Scrolly Thing

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Shosuke Doi

Programming language

  • HTML / CSS / JS

Information a code

Mobile Nav Bar

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • creme

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Uber-like Navigation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Creator

  • Jessica Valeska da Silva

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Responsive Menu Scroll Left

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Creator

  • Leon Heess

Programming language

  • HTML / CSS / JS

Information a code

Droplet Menu Animation

Droplet scroll animation for the hamburger menu in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Dejan Babić

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Menu with Morphing Shapes

jQuery menu with morphing shapes.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js

Creator

  • Yiting Liu

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Menu

Horizontal jQuery menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Tobias Glaus

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Navigation with Scrolling

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Jon Wilcox

Programming language

  • HTML / CSS (Less) / JS

Information a code

Expanding and Collapsing Hamburger Menu

Experimenting with making the menu items themselves collapse into the bars of the hamburger menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • rv7

Programming language

  • HTML / CSS / JS

Information a code

Hamburger Menu

CSS and jQuery hamburger menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Giorgio Acquati

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Navigation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Dejan Babić

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Mobile Navigation

Mobile navigation animation using GSAP.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js, morphsvgplugin.js

Creator

  • Praveen Kumar Gorakala

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Radial Menu

Radial menu – creator visons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, jquery.js, font-awesome.js

Creator

  • Jordan

Programming language

  • HTML / CSS / JS

Information a code

Side Menu Animation

Side menu animation in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Aaron Awad

Programming language

  • HTML / CSS / JS

Information a code

Multi-level Side Nav Menu

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Creator

  • Praveen Bisht

Programming language

  • HTML (Pug) / CSS (SCSS) / JS

Information a code

Slide Out Navigation Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Dronca Raul

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Menu Interaction

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, feather.js

Creator

  • Aaron Taylor

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Burger Menu

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Dogacan

Programming language

  • HTML (Pug) / CSS (Sass) / JS

Information a code

Mobile Dropdown Menu

Mobile dropdown menu example with keyframe animations and transitions.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Florian Guiffrey

Programming language

  • HTML / CSS / JS

Information a code

Fancy Toggle Menu

A fancy toggle menu to edit quickly posts on websites.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Mitchell Swaffield

Programming language

  • HTML / CSS / JS

Information a code

NavMenu

Expandble/collapsable navigational menu with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • veronika

Programming language

  • HTML / CSS / JS

Information a code

Fullscreen Menu with Flexbox & jQuery

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • naymapl

Programming language

  • HTML / CSS / JS

Information a code

Dropdown Menu jQuery

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Anya Melnyk

Programming language

  • HTML / CSS / JS

Information a code

Hamburger Slide Accordion Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Keith Light

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Angled Menu

Off canvas jQuery angled menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Benedict

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Circular Navigation Concept

A new navigation concept.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Alex Coven

Programming language

  • HTML / CSS / JS

Information a code

Menu Shelf and Logo to Hamburger Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • uros

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Apple Menu Search Animation

Apple website menu search animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, animate.css

Creator

  • Em Ji Madhu

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Real Fullscreen Navigation

A full viewport responsive navigation with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Boomer

Programming language

  • HTML / CSS (Sass) / JS

Information a code

jQuery Staggered Animation Dropdown Menu

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Greg Hovanesyan

Programming language

  • HTML / CSS / JS

Information a code

Animated Navigation

Animated mobile navigation created in JavaScript using Greensock.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Creator

  • Mahmoud

Programming language

  • HTML / CSS / JS

Information a code

Floating Circular Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • Ryan Mulligan

Programming language

  • HTML (Pug) / CSS (SCSS) / JS

Information a code

Off Canvas Mobile Submenu

An experimentation that sets all submenus off screen so that they can be toggled in and out of view when their parent arrow elements are clicked.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Boomer

Programming language

  • HTML / CSS (Sass) / JS

Information a code

Fixed Navigation Sidebar

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, linearicons.js, bootstrap.js

Creator

  • Tim Normington

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Diagonal Mega Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js, jquery-ui.js, tweenmax.js

Creator

  • Alberto

Programming language

  • HTML / CSS / JS

Information a code

Multi-Device Scrolling Menu

A simple responsive horizontal menu ready for any device. For the sample only the background colour will change between countries.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Creator

  • Mirko Zorić

Programming language

  • HTML / CSS / JS

Information a code

Flexbox Overlay Navigation

Velocity.js fullscreen Flexbox overlay navigation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: velocity.js, velocity.ui.js

Creator

  • Roemerdt

Programming language

  • HTML (Pug) / CSS (SCSS) / JS (CoffeeScript)

Information a code

A Clean Navigation Slider

This is a very clean navigation with a cool slider in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Mohan Khadka

Programming language

  • HTML / CSS / JS

Information a code

Secret UI Project

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: ionicons.css, animate.css

Creator

  • James Mejia

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Responsive Mega Dropdown

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, enquire.js

Creator

  • J Scott Smith

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Sidebar Menu Concept

Sidebar menu that pushes content aside in 3D space. Still prettifying things.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Creator

  • Timofey

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Dota 2 Wheel Chat

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!

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, wheel-menu.js

Creator

  • Andrey Pokrovskiy

Programming language

  • HTML / CSS (Less) / JS

Information a code

Circular Layered Menu

Circular, vinyl-like menu with explanatory label that pop when icons are hovered.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js, tweenmax.js

Creator

  • Chrysto

Programming language

  • HTML / CSS / JS

Information a code

Lastik Menu

Simple lava-lamp like horizontal menu, using jQuery and Tweenmax.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

jQuery Menu Plugins

Demo image: Hiraku.js
Made by

  • appleple
Github activity

  • 65 stars
  • 12 watchers

Information the plugin

Hiraku.js

Hiraku.js – jQuery offcanvas menu plugin.

Demo image: Sidebar Menu
Made by

  • huang.xinghui
Github activity

  • 42 stars
  • 4 watchers

Information the plugin

Sidebar Menu

Sidebar menu jQuery component base on AdminLTE.

Demo image: Slide And Swipe Menu
Made by

  • Joan Claret
Github activity

  • 96 stars
  • 12 watchers

Information the plugin

Slide And Swipe Menu

A sliding swipe menu that works with touchSwipe library.

Demo image: Drawer
Made by

  • Yasuyuki Enomoto
Github activity

  • 477 stars
  • 29 watchers

Information the plugin

Drawer

Flexible drawer menu using jQuery, iScroll and CSS.

Demo image: Slinky
Made by

  • Ali Zahid
Github activity

  • 430 stars
  • 20 watchers

Information the plugin

Slinky

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

Demo image: Tendina
Made by

  • Ivan Prignano
Github activity

  • 139 stars
  • 15 watchers

Information the plugin

Tendina

Tendina is a simple jQuery plugin that helps you build dynamic, interactive side-menus in seconds.

Demo image: Bootstrap Submenu
Made by

  • Vasilii Artemchuk
Github activity

  • 343 stars
  • 40 watchers

Information the plugin

Bootstrap Submenu

Bootstrap sub-menus.

Demo image: stickyNavbar.js
Made by

  • Jozef Butko
Github activity

  • 278 stars
  • 17 watchers

Information the plugin

stickyNavbar.js

StickyNavbar.js: fancy sticky navigation jQuery plugin with smart anchor links highlighting.

Demo image: Box Lid Menu
Made by

  • James Lim
Github activity

  • 43 stars
  • 9 watchers

Information the plugin

Box Lid Menu

This jQuery plugin creates the box lid effect for navigation menus.

Demo image: stickUp
Made by

  • Liran Cohen
Github activity

  • 1531 stars
  • 100 watchers

Information the plugin

stickUp

StickUp a jQuery Plugin for sticky navigation menus.

Features

  • simple integration
  • the “one pager”
Demo image: scrollNav
Made by

  • Jimmy Wilson
Github activity

  • 394 stars
  • 25 watchers

Information the plugin

scrollNav

A jQuery plugin for building a scrolling navigation menu.

Demo image: bigSlide.js
Made by

  • Adam Scott
Github activity

  • 392 stars
  • 19 watchers

Information the plugin

bigSlide.js

bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

Demo image: offCanvasMenu
Made by

  • Cloud Four
Github activity

  • 150 stars
  • 13 watchers

Information the plugin

offCanvasMenu

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.

Demo image: Metismenu
Made by

  • Osman Nuri Okumuş
Github activity

  • 1508 stars
  • 106 watchers

Information the plugin

Metismenu

A jQuery menu plugin.

Demo image: jQuery Superfish Dropdown Menu Plugin
Made by

  • Joel Birch
Github activity

  • 856 stars
  • 84 watchers

Information the plugin

jQuery Superfish Dropdown Menu Plugin

Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.

Demo image: SlickNav
Made by

  • Josh
Github activity

  • 824 stars
  • 66 watchers

Information the plugin

SlickNav

Responsive mobile menu jQuery plugin.

Demo image: SmartMenus
Made by

  • Vasil Dinkov
Github activity

  • 478 stars
  • 51 watchers

Information the plugin

SmartMenus

Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.

Demo image: SlimMenu
Made by

  • Adnan Topal
Github activity

  • 299 stars
  • 34 watchers

Information the plugin

SlimMenu

SlimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

Demo image: jQuery.Dropotron
Made by

  • aj
Github activity

  • 123 stars
  • 15 watchers

Information the plugin

jQuery.Dropotron

jquery.dropotron: multilevel dropdown menus for jQuery.

Demo image: Sidr
Made by

  • Alberto Varela
Github activity

  • 2921 stars
  • 154 watchers

Information the plugin

Sidr

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.

Demo image: Fixed Table of Contents Drop-Down Menu jQuery Plugin
Made by

  • Louis Lazaris
Github activity

  • 53 stars
  • 0 watchers

Information the plugin

Fixed Table of Contents Drop-Down Menu jQuery Plugin

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.

Demo image: jPanelMenu
Made by

  • Anthony Colangelo
Github activity

  • 956 stars
  • 86 watchers

Information the plugin

jPanelMenu

A jQuery plugin that creates a paneled-style menu.

Demo image: visualNav
Made by

  • Rob Garrison
Github activity

  • 68 stars
  • 8 watchers

Information the plugin

visualNav

A jQuery plugin that modifies a navigation menu to highlight/change when the menu’s target smooth scrolls into view.