65+ jQuery Menus - Free Code + Demos

Collection of 65+ jQuery Menus. All items are 100% free and open-source.

1. One Page Scrolly Thing

jQuery Menus - One Page Scrolly Thing
Author: Joshua Ward (joshuaward)
Created on: November 10, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

2. Mobile Nav Bar

jQuery Menus - Mobile Nav bar
I stumble upon the web site which is using mobile nav bar fixed on its bottom. I was really inspired!! Therefore, I tried!! I can't tell you that it took 2days just done this nav bar... but I made it!!!
Author: Shosuke Doi (doiverson)
Created on: November 5, 2018
Made with: HTML, CSS, JS
Tags: html, css, javascript, jquery, portfolio

3. Uber-like Navigation

jQuery Menus - Uber-like Navigation
I made my own version of the Navigation on the Uber Rebrand 2018 Website
Author: creme (creme)
Created on: September 27, 2018
Made with: HTML, SCSS, JS

4. Responsive Menu Scroll Left

jQuery Menus - Responsive Menu Scroll Left
Author: Jessica Valeska da Silva (jvaleskasilva)
Created on: July 3, 2018
Made with: HTML, SCSS, JS
Tags: menu, responsive, scroll, hamburguer, toggle

5. Droplet Menu Animation

jQuery Menus - Droplet Menu Animation
Droplet scroll animation for the hamburger menu Inspired by https://dribbble.com/shots/1708213-floating-hamburger
Author: Leon Heess (MiXT4PE)
Created on: June 30, 2018
Made with: HTML, CSS, JS
Tags: nav, hamburger, droplet, fluid, scroll

6. Menu With Morphing Shapes

jQuery Menus - Menu With Morphing Shapes
Author: Dejan Babić (microfront)
Created on: June 29, 2018
Made with: HTML, SCSS, JS
Tags: codepenchallenge, cpc-menus, menu, tweenmax, morph svg

7. Zigzag Dropdown Menu Concept

jQuery Menus - Zigzag dropdown menu concept
This is just another dropdown menu concept.
Author: Catalin Rosu (catalinred)
Created on: September 2, 2013
Made with: HTML, CSS, JS
Tags: css3

8. Navigation With Scrolling

jQuery Menus - Navigation With Scrolling
This is my approach for this weeks CodePen challenge :)
Author: Tobias Glaus (tobiasglaus)
Created on: June 28, 2018
Made with: HTML, SCSS, JS
Tags: cpc-menu, codepenchallenge

9. Expanding And Collapsing Hamburger Menu

jQuery Menus - Expanding and Collapsing Hamburger Menu
Experimenting with making the menu items themselves collapse into the bars of the hamburger menu.
Author: Jon Wilcox (jonwilcox)
Created on: June 26, 2018
Made with: HTML, Less, JS
Tags: codepenchallenge, cpc-menus

10. Hamburger Menu - CSS And JQuery

jQuery Menus - Hamburger Menu - CSS and jQuery
Author: rv7 (Rahul_V7)
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: css, html, javascript, jquery, hamburger-menu

11. Vertical Layout With Navigation

jQuery Menus - Vertical Layout with Navigation
Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.
Author: Ettrics (ettrics)
Created on: April 7, 2015
Made with: HTML, SCSS, JS
Tags: vertical, layout, navigation, animation, responsive

12. Mobile Navigation Animation Using GSAP

jQuery Menus - Mobile navigation animation using GSAP
Author: Dejan Babić (microfront)
Created on: April 16, 2018
Made with: HTML, SCSS, JS
Tags: responsive-menu, mobile-navigation, menu-animation, tweenmax

13. Side Menu Animation

jQuery Menus - Side Menu Animation
Author: Jordan (flyingcar)
Created on: March 9, 2018
Made with: HTML, CSS, JS

14. Multi-level Side Nav Menu

jQuery Menus - 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.
Author: Aaron Awad (blindpiggy)
Created on: February 28, 2018
Made with: HTML, CSS, JS
Tags: navigation, pattern, jquery, checkbox-hack, checkbox

15. Slide Out Navigation Menu

jQuery Menus - Slide Out Navigation Menu
Author: Praveen Bisht (prvnbist)
Created on: February 25, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

17. Hamburger Menu - CSS And JQuery

jQuery Menus - Hamburger Menu - CSS and jQuery
Author: rv7 (Rahul_V7)
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: css, html, javascript, jquery, hamburger-menu

18. Mobile Dropdown Menu

jQuery Menus - Mobile Dropdown Menu
Mobile dropdown menu example with keyframe animations and transitions.
Author: Doğacan (Bilgili)
Created on: September 26, 2017
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: mobile, dropdown, menu, jquery

19. Off Canvas Mobile Submenu

jQuery Menus - 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.
Author: Ryan Mulligan (hexagoncircle)
Created on: June 20, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: off-canvas, menu, mobile, toggle, transitions

20. Diagonal Mega Menu

jQuery Menus - Diagonal Mega Menu
Author: Tim Normington (tnormington)
Created on: March 4, 2016
Made with: HTML, SCSS, JS
Tags: responsive, menu, jquery, megamenu, off-screen

21. Multi-device Scrolling Menu

jQuery Menus - Multi-device scrolling menu
Author: AC (ac_coding)
Created on: January 25, 2016
Made with: HTML, CSS, JS

22. Responsive Mega Dropdown

jQuery Menus - Responsive Mega Dropdown
Recently I had to work on making a mega dropdown responsive while still offering all of the functionality. Users have to be able to click on top-level links and drill down to the categories. This is similar to what I ended up going with. Inspired by the codyhouse mega dropdown.
Author: James Mejia (mejiaj)
Created on: June 19, 2015
Made with: HTML, SCSS, JS
Tags: mega-dropdown, responsive, responsive-menu

23. Sidebar Menu Concept

jQuery Menus - Sidebar Menu Concept
Sidebar menu that pushes content aside in 3D space. Still prettifying things.
Author: J Scott Smith (jscottsmith)
Created on: May 2, 2015
Made with: HTML, SCSS, JS
Tags: menu, sidebar, toggle, perspective, rotate

24. Dota 2 Wheel Chat

jQuery Menus - 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!
Author: Timofey (t1m0n)
Created on: April 8, 2015
Made with: HTML, SCSS, JS
Tags: wheel-menu, wheel-chat, dota, javascript, animation

25. Circular Layered Menu

jQuery Menus - Circular layered menu
Circular, vinyl-like menu with explanatory label that pop when icons are hovered.
Author: Andrey Pokrovskiy (DreySkee)
Created on: February 20, 2015
Made with: HTML, Less, JS
Tags: menu, navigation, circular, vinyl, greensock

26. Lastik Menu

jQuery Menus - Lastik menu
Simple lava-lamp like horizontal menu, using Tweenmax
Author: Chrysto (bassta)
Created on: January 17, 2013
Made with: HTML, CSS, JS

27. Hiraku.js

jQuery Menus - Hiraku.js
jQuery Offcanvas Menu Plugin
Created on: October 24, 2016

28. Sidebar Menu

jQuery Menus - Sidebar Menu
jQuery sidebar-menu component
Created on: July 4, 2016

29. Slide And Swipe Menu

jQuery Menus - Slide And Swipe Menu
:zap: A sliding swipe menu that works with touchSwipe library.
Created on: July 2, 2015

30. Drawer

jQuery Menus - Drawer
Flexible drawer menu using jQuery, iScroll and CSS.
Created on: May 10, 2014

31. Slinky

A light-weight, responsive, mobile-like navigation menu plugin
Created on: April 15, 2014

32. Tendina

A super easy-to-use jQuery plugin to rapidly build dropdown side menus.
Created on: March 26, 2014

33. Bootstrap Submenu

Bootstrap sub-menus
Created on: August 12, 2014

34. Stickynavbar.js

stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting
Created on: March 8, 2014

35. Stickup

stickUp a jQuery Plugin for sticky navigation menus.
Created on: November 1, 2013

36. Scrollnav

A dependency free JavaScript plugin for auto generating single page navigation
Created on: January 6, 2013

37. Bigslide.js

⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams
Created on: April 9, 2013

38. Offcanvasmenu

A jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.
Created on: April 4, 2013

39. Metismenu

A jQuery menu plugin
Created on: November 30, 2013

40. Smartmenus

jQuery Menus - Smartmenus
Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.
Created on: June 1, 2013

41. Slimmenu

:white_medium_small_square: slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
Created on: July 18, 2013

42. JQuerydropotron

Adds multilevel dropdown menus to jQuery.
Created on: October 30, 2013

43. Sidr

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Created on: February 12, 2013

44. Fixed Table Of Contents Drop Down Menu JQuery Plugin

A fixed table of contents drop-down menu jQuery plugin.
Created on: May 7, 2012

45. Jpanelmenu

A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).
Created on: September 17, 2012

46. VisualNav

A jQuery plugin that modifies a navigation menu to highlight / change when the menu's target smooth scrolls into view
Created on: July 9, 2010

47. Menu JQuery

jQuery Menus - Menu jQuery
Le même que le menu précédant en CSS, mais cette fois en utilisant jQuery. La version précédente ne fonctionnait pas sur les apple devices.
Author: Christophe Kirsch (chriskirsch)
Created on: February 11, 2015
Made with: HTML, CSS, JS
Tags: menu jquery css

48. Perfect Dropdown Menu - JQuery

jQuery Menus - Perfect Dropdown menu - jQuery
Author: Aurelian Spodarec (Aurelian)
Created on: April 15, 2016
Made with: HTML, CSS, JS

49. Mega Menu Responsive

jQuery Menus - Mega Menu Responsive
Author: tsonmuhammad (tisonmuhammad)
Created on: November 1, 2016
Made with: HTML, CSS, JS

50. SlideToggle Menu

jQuery Menus - SlideToggle Menu
I used slideToggle to expand/collapse menu items. I cant figure out how to get it to scroll to the top of the selected list item yet. Will update soon This targets all open menus and closes them when a new one is clicked, so you can only have 1 menu at a time UPDATE - made it responsive
Author: Keith Light (keefyboooo)
Created on: May 14, 2015
Made with: HTML, CSS, JS

51. JQuery Accordion Navigation Menu

jQuery Menus - jQuery Accordion Navigation Menu
A reusable jQuery accordion navigation menu, works with any amount of categories and subcategories
Author: James Thomas Almond (jamestalmond)
Created on: February 9, 2017
Made with: HTML, SCSS, JS
Tags: jquery, accordion, menu, javascript, mobile

52. JQuery-menu-aim

jQuery Menus - jQuery-menu-aim
Forked from Edrees's Pen rVaXpZ.
Author: Casper Kuijjer (ckuijjer)
Created on: May 7, 2015
Made with: HTML, Less, JS

53. Nested JQuery Dropdown Menu

jQuery Menus - Nested jQuery Dropdown Menu
Nested jQuery dropdown menu plugin.
Author: Dustin Dowell (dustindowell)
Created on: March 8, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: jquery, dropdown, plugin, nested, mobile

54. Fixed-menu-bar-with-scroll

jQuery Menus - fixed-menu-bar-with-scroll
Author: dru (druArt)
Created on: June 3, 2017
Made with: HTML, SCSS, JS

55. Stripe Menu Full

jQuery Menus - Stripe Menu Full
Author: Jake Henshall (JakeHenshall)
Made with: HTML, SCSS, JS

56. Simple JQuery One Page Smooth Scrolling Navigation

jQuery Menus - Simple jQuery One Page Smooth Scrolling Navigation
Simple jQuery One Page Smooth Scrolling Navigation Scroll to the desired section on click Make sure to add the data-scroll attribute to your tag. Example: My Section will scroll to an element with the id of 'my-section'.
Author: Chris Hammond (chrishammond)
Created on: July 19, 2016
Made with: HTML, CSS, JS
Tags: jquery, scroll, smooth-scroll, navigation

57. Corner Menu

jQuery Menus - Corner Menu
A different approach to navigation ux. This is built with jQuery, TouchSwipe, Bootstrap, etc.
Author: Jochem Stoel (jochemstoel)
Created on: February 14, 2020
Made with: Pug, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: corner, nav, menu, ux, ui

jQuery Menu Examples

1. One Page Scrolly Thing

jQuery Menus - One Page Scrolly Thing
Author: Joshua Ward (joshuaward)
Created on: November 10, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

2. Mobile Nav Bar

jQuery Menus - Mobile Nav bar
I stumble upon the web site which is using mobile nav bar fixed on its bottom. I was really inspired!! Therefore, I tried!! I can't tell you that it took 2days just done this nav bar... but I made it!!!
Author: Shosuke Doi (doiverson)
Created on: November 5, 2018
Made with: HTML, CSS, JS
Tags: html, css, javascript, jquery, portfolio

3. Uber-like Navigation

jQuery Menus - Uber-like Navigation
I made my own version of the Navigation on the Uber Rebrand 2018 Website
Author: creme (creme)
Created on: September 27, 2018
Made with: HTML, SCSS, JS

4. Responsive Menu Scroll Left

jQuery Menus - Responsive Menu Scroll Left
Author: Jessica Valeska da Silva (jvaleskasilva)
Created on: July 3, 2018
Made with: HTML, SCSS, JS
Tags: menu, responsive, scroll, hamburguer, toggle

5. Droplet Menu Animation

jQuery Menus - Droplet Menu Animation
Droplet scroll animation for the hamburger menu Inspired by https://dribbble.com/shots/1708213-floating-hamburger
Author: Leon Heess (MiXT4PE)
Created on: June 30, 2018
Made with: HTML, CSS, JS
Tags: nav, hamburger, droplet, fluid, scroll

6. Menu With Morphing Shapes

jQuery Menus - Menu With Morphing Shapes
Author: Dejan Babić (microfront)
Created on: June 29, 2018
Made with: HTML, SCSS, JS
Tags: codepenchallenge, cpc-menus, menu, tweenmax, morph svg

7. Zigzag Dropdown Menu Concept

jQuery Menus - Zigzag dropdown menu concept
This is just another dropdown menu concept.
Author: Catalin Rosu (catalinred)
Created on: September 2, 2013
Made with: HTML, CSS, JS
Tags: css3

8. Navigation With Scrolling

jQuery Menus - Navigation With Scrolling
This is my approach for this weeks CodePen challenge :)
Author: Tobias Glaus (tobiasglaus)
Created on: June 28, 2018
Made with: HTML, SCSS, JS
Tags: cpc-menu, codepenchallenge

9. Expanding And Collapsing Hamburger Menu

jQuery Menus - Expanding and Collapsing Hamburger Menu
Experimenting with making the menu items themselves collapse into the bars of the hamburger menu.
Author: Jon Wilcox (jonwilcox)
Created on: June 26, 2018
Made with: HTML, Less, JS
Tags: codepenchallenge, cpc-menus

10. Hamburger Menu - CSS And JQuery

jQuery Menus - Hamburger Menu - CSS and jQuery
Author: rv7 (Rahul_V7)
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: css, html, javascript, jquery, hamburger-menu

11. Vertical Layout With Navigation

jQuery Menus - Vertical Layout with Navigation
Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.
Author: Ettrics (ettrics)
Created on: April 7, 2015
Made with: HTML, SCSS, JS
Tags: vertical, layout, navigation, animation, responsive

12. Mobile Navigation Animation Using GSAP

jQuery Menus - Mobile navigation animation using GSAP
Author: Dejan Babić (microfront)
Created on: April 16, 2018
Made with: HTML, SCSS, JS
Tags: responsive-menu, mobile-navigation, menu-animation, tweenmax

13. Side Menu Animation

jQuery Menus - Side Menu Animation
Author: Jordan (flyingcar)
Created on: March 9, 2018
Made with: HTML, CSS, JS

14. Multi-level Side Nav Menu

jQuery Menus - 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.
Author: Aaron Awad (blindpiggy)
Created on: February 28, 2018
Made with: HTML, CSS, JS
Tags: navigation, pattern, jquery, checkbox-hack, checkbox

15. Slide Out Navigation Menu

jQuery Menus - Slide Out Navigation Menu
Author: Praveen Bisht (prvnbist)
Created on: February 25, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

17. Hamburger Menu - CSS And JQuery

jQuery Menus - Hamburger Menu - CSS and jQuery
Author: rv7 (Rahul_V7)
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: css, html, javascript, jquery, hamburger-menu

18. Mobile Dropdown Menu

jQuery Menus - Mobile Dropdown Menu
Mobile dropdown menu example with keyframe animations and transitions.
Author: Doğacan (Bilgili)
Created on: September 26, 2017
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: mobile, dropdown, menu, jquery

19. Off Canvas Mobile Submenu

jQuery Menus - 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.
Author: Ryan Mulligan (hexagoncircle)
Created on: June 20, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: off-canvas, menu, mobile, toggle, transitions

20. Diagonal Mega Menu

jQuery Menus - Diagonal Mega Menu
Author: Tim Normington (tnormington)
Created on: March 4, 2016
Made with: HTML, SCSS, JS
Tags: responsive, menu, jquery, megamenu, off-screen

21. Multi-device Scrolling Menu

jQuery Menus - Multi-device scrolling menu
Author: AC (ac_coding)
Created on: January 25, 2016
Made with: HTML, CSS, JS

22. Responsive Mega Dropdown

jQuery Menus - Responsive Mega Dropdown
Recently I had to work on making a mega dropdown responsive while still offering all of the functionality. Users have to be able to click on top-level links and drill down to the categories. This is similar to what I ended up going with. Inspired by the codyhouse mega dropdown.
Author: James Mejia (mejiaj)
Created on: June 19, 2015
Made with: HTML, SCSS, JS
Tags: mega-dropdown, responsive, responsive-menu

23. Sidebar Menu Concept

jQuery Menus - Sidebar Menu Concept
Sidebar menu that pushes content aside in 3D space. Still prettifying things.
Author: J Scott Smith (jscottsmith)
Created on: May 2, 2015
Made with: HTML, SCSS, JS
Tags: menu, sidebar, toggle, perspective, rotate

24. Dota 2 Wheel Chat

jQuery Menus - 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!
Author: Timofey (t1m0n)
Created on: April 8, 2015
Made with: HTML, SCSS, JS
Tags: wheel-menu, wheel-chat, dota, javascript, animation

25. Circular Layered Menu

jQuery Menus - Circular layered menu
Circular, vinyl-like menu with explanatory label that pop when icons are hovered.
Author: Andrey Pokrovskiy (DreySkee)
Created on: February 20, 2015
Made with: HTML, Less, JS
Tags: menu, navigation, circular, vinyl, greensock

26. Lastik Menu

jQuery Menus - Lastik menu
Simple lava-lamp like horizontal menu, using Tweenmax
Author: Chrysto (bassta)
Created on: January 17, 2013
Made with: HTML, CSS, JS

jQuery Menu Plugins

1. Hiraku.js

jQuery Menus - Hiraku.js
jQuery Offcanvas Menu Plugin
Created on: October 24, 2016

2. Sidebar Menu

jQuery Menus - Sidebar Menu
jQuery sidebar-menu component
Created on: July 4, 2016

3. Slide And Swipe Menu

jQuery Menus - Slide And Swipe Menu
:zap: A sliding swipe menu that works with touchSwipe library.
Created on: July 2, 2015

4. Drawer

jQuery Menus - Drawer
Flexible drawer menu using jQuery, iScroll and CSS.
Created on: May 10, 2014

5. Slinky

A light-weight, responsive, mobile-like navigation menu plugin
Created on: April 15, 2014

6. Tendina

A super easy-to-use jQuery plugin to rapidly build dropdown side menus.
Created on: March 26, 2014

7. Bootstrap Submenu

Bootstrap sub-menus
Created on: August 12, 2014

8. Stickynavbar.js

stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting
Created on: March 8, 2014

9. Stickup

stickUp a jQuery Plugin for sticky navigation menus.
Created on: November 1, 2013

10. Scrollnav

A dependency free JavaScript plugin for auto generating single page navigation
Created on: January 6, 2013

11. Bigslide.js

⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams
Created on: April 9, 2013

12. Offcanvasmenu

A jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.
Created on: April 4, 2013

13. Metismenu

A jQuery menu plugin
Created on: November 30, 2013

14. Smartmenus

jQuery Menus - Smartmenus
Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.
Created on: June 1, 2013

15. Slimmenu

:white_medium_small_square: slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
Created on: July 18, 2013

16. JQuerydropotron

Adds multilevel dropdown menus to jQuery.
Created on: October 30, 2013

17. Sidr

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Created on: February 12, 2013

18. Fixed Table Of Contents Drop Down Menu JQuery Plugin

A fixed table of contents drop-down menu jQuery plugin.
Created on: May 7, 2012

19. Jpanelmenu

A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).
Created on: September 17, 2012

20. VisualNav

A jQuery plugin that modifies a navigation menu to highlight / change when the menu's target smooth scrolls into view
Created on: July 9, 2010