TOP 50 jQuery Menus

ONE PAGE SCROLLY THING

See the Pen One Page Scrolly Thing by Joshua Ward (@joshuaward) on CodePen.light

Author

  • Joshua Ward

Made with

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

MOBILE NAV BAR

See the Pen Mobile Nav bar by Shosuke Doi (@doiverson) on CodePen.light

Author

  • Shosuke Doi

Made with

  • HTML / CSS / JS

UBER-LIKE NAVIGATION

See the Pen Uber-like Navigation by creme (@creme) on CodePen.light

Author

  • creme

Made with

  • HTML / CSS (SCSS) / JS

RESPONSIVE MENU SCROLL LEFT

See the Pen Responsive Menu Scroll Left by Jessica Valeska da Silva (@jvaleskasilva) on CodePen.light

Author

  • Jessica Valeska da Silva

Made with

  • HTML / CSS (SCSS) / JS

DROPLET MENU ANIMATION

Droplet scroll animation for the hamburger menu in jQuery.

See the Pen Droplet Menu Animation by Leon Heess (@MiXT4PE) on CodePen.light

Author

  • Leon Heess

Made with

  • HTML / CSS / JS

MENU WITH MORPHING SHAPES

jQuery menu with morphing shapes.

See the Pen Menu – #CodePenChallenge by Dejan Babić (@microfront) on CodePen.light

Author

  • Dejan Babić

Made with

  • HTML / CSS (SCSS) / JS

MENU

Horizontal jQuery menu.

See the Pen 14 | Menu #CodepenChallenge by Yiting Liu (@yitliu) on CodePen.light

Author

  • Yiting Liu

Made with

  • HTML / CSS (SCSS) / JS

NAVIGATION WITH SCROLLING

See the Pen #CodePenChallenge – Menu by Tobias Glaus (@tobiasglaus) on CodePen.light

Author

  • Tobias Glaus

Made with

  • HTML / CSS (SCSS) / JS

EXPANDING AND COLLAPSING HAMBURGER MENU

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

See the Pen Expanding and Collapsing Hamburger Menu by Jon Wilcox (@jonwilcox) on CodePen.light

Author

  • Jon Wilcox

Made with

  • HTML / CSS (Less) / JS

HAMBURGER MENU

CSS and jQuery hamburger menu.

See the Pen Hamburger Menu – CSS and jQuery by rv7 (@Rahul_V7) on CodePen.light

Author

  • rv7

Made with

  • HTML / CSS / JS

NAVIGATION

See the Pen Navigation by Giorgio Acquati (@GioAc96) on CodePen.light

Author

  • Giorgio Acquati

Made with

  • HTML / CSS (SCSS) / JS

MOBILE NAVIGATION

Mobile navigation animation using GSAP.

See the Pen Mobile navigation animation using GSAP by Dejan Babić (@microfront) on CodePen.light

Author

  • Dejan Babić

Made with

  • HTML / CSS (SCSS) / JS

RADIAL MENU

Radial menu – creator visons.

See the Pen Radial Menu – Creator Visons by Praveen Kumar Gorakala (@onlyveen) on CodePen.light

Author

  • Praveen Kumar Gorakala

Made with

  • HTML / CSS (SCSS) / JS

SIDE MENU ANIMATION

Side menu animation in jQuery.

See the Pen Side Menu Animation by Jordan (@flyingcar) on CodePen.light

Author

  • Jordan

Made with

  • HTML / CSS / JS

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.

See the Pen Multi-level Side Nav Menu by Aaron Awad (@blindpiggy) on CodePen.light

Author

  • Aaron Awad

Made with

  • HTML / CSS / JS

SLIDE OUT NAVIGATION MENU

See the Pen Slide Out Navigation Menu by Praveen Bisht (@prvnbist) on CodePen.light

Author

  • Praveen Bisht

Made with

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

MENU INTERACTION

See the Pen Menu Interaction #1 by Dronca Raul (@rauldronca) on CodePen.light

Author

  • Dronca Raul

Made with

  • HTML / CSS (SCSS) / JS

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.

See the Pen Burger Menu by Aaron Taylor (@BeanBaag) on CodePen.light

Author

  • Aaron Taylor

Made with

  • HTML / CSS (SCSS) / JS

MOBILE DROPDOWN MENU

Mobile dropdown menu example with keyframe animations and transitions.

See the Pen Mobile Dropdown Menu by Doğacan (@Bilgili) on CodePen.light

Author

  • Dogacan

Made with

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

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.

See the Pen Off Canvas Mobile Submenu by Ryan Mulligan (@hexagoncircle) on CodePen.light

Author

  • Ryan Mulligan

Made with

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

DIAGONAL MEGA MENU

See the Pen Diagonal Mega Menu by Tim Normington (@tnormington) on CodePen.light

Author

  • Tim Normington

Made with

  • HTML / CSS (SCSS) / JS

MULTI-DEVICE SCROLLING MENU

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

See the Pen Multi-device scrolling menu by AC (@ac_coding) on CodePen.light

Author

  • Alberto

Made with

  • HTML / CSS / JS

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.

See the Pen Responsive Mega Dropdown by James Mejia (@mejiaj) on CodePen.light

Author

  • James Mejia

Made with

  • HTML / CSS (SCSS) / JS

SIDEBAR MENU CONCEPT

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

See the Pen Sidebar Menu Concept by J Scott Smith (@jscottsmith) on CodePen.light

Author

  • J Scott Smith

Made with

  • HTML / CSS (SCSS) / JS

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!

See the Pen Dota 2 wheel chat by Timofey (@t1m0n) on CodePen.light

Author

  • Timofey

Made with

  • HTML / CSS (SCSS) / JS

CIRCULAR LAYERED MENU

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

See the Pen Circular layered menu by Andrey Pokrovskiy (@DreySkee) on CodePen.light

Author

  • Andrey Pokrovskiy

Made with

  • HTML / CSS (Less) / JS

LASTIK MENU

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

See the Pen Lastik menu by Chrysto (@bassta) on CodePen.light

Author

  • Chrysto

Made with

  • HTML / CSS / JS

HIRAKU.JS

Hiraku.js – jQuery offcanvas menu plugin.

Demo image: Hiraku.js

Made by

  • appleple

Github activity

  • 65 stars
  • 12 watchers

SIDEBAR MENU

Sidebar menu jQuery component base on AdminLTE.

Demo image: Sidebar Menu

Made by

  • huang.xinghui

Github activity

  • 42 stars
  • 4 watchers

SLIDE AND SWIPE MENU

A sliding swipe menu that works with touchSwipe library.

Demo image: Slide And Swipe Menu

Made by

  • Joan Claret

Github activity

  • 96 stars
  • 12 watchers

DRAWER

Flexible drawer menu using jQuery, iScroll and CSS.

Demo image: Drawer

Made by

  • Yasuyuki Enomoto

Github activity

  • 477 stars
  • 29 watchers

SLINKY

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

Demo image: Slinky

Made by

  • Ali Zahid

Github activity

  • 430 stars
  • 20 watchers

TENDINA

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

Demo image: Tendina

Made by

  • Ivan Prignano

Github activity

  • 139 stars
  • 15 watchers

BOOTSTRAP SUBMENU

Bootstrap sub-menus.

Demo image: Bootstrap Submenu

Made by

  • Vasilii Artemchuk

Github activity

  • 343 stars
  • 40 watchers

STICKYNAVBAR.JS

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

Demo image: stickyNavbar.js

Made by

  • Jozef Butko

Github activity

  • 278 stars
  • 17 watchers

BOX LID MENU

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

Demo image: Box Lid Menu

Made by

  • James Lim

Github activity

  • 43 stars
  • 9 watchers

STICKUP

StickUp a jQuery Plugin for sticky navigation menus.

Demo image: stickUp

Made by

  • Liran Cohen

Github activity

  • 1531 stars
  • 100 watchers

SCROLLNAV

A jQuery plugin for building a scrolling navigation menu.

Demo image: scrollNav

Made by

  • Jimmy Wilson

Github activity

  • 394 stars
  • 25 watchers

BIGSLIDE.JS

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

Demo image: bigSlide.js

Made by

  • Adam Scott

Github activity

  • 392 stars
  • 19 watchers

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

Made by

  • Cloud Four

Github activity

  • 150 stars
  • 13 watchers

METISMENU

A jQuery menu plugin.

Demo image: Metismenu

Made by

  • Osman Nuri Okumuş

Github activity

  • 1508 stars
  • 106 watchers

JQUERY SUPERFISH DROPDOWN MENU PLUGIN

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

Demo image: jQuery Superfish Dropdown Menu Plugin

Made by

  • Joel Birch

Github activity

  • 856 stars
  • 84 watchers

SLICKNAV

Responsive mobile menu jQuery plugin.

Demo image: SlickNav

Made by

  • Josh

Github activity

  • 824 stars
  • 66 watchers

SMARTMENUS

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

Demo image: SmartMenus

Made by

  • Vasil Dinkov

Github activity

  • 478 stars
  • 51 watchers

SLIMMENU

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

Demo image: SlimMenu

Made by

  • Adnan Topal

Github activity

  • 299 stars
  • 34 watchers

JQUERY.DROPOTRON

jquery.dropotron: multilevel dropdown menus for jQuery.

Demo image: jQuery.Dropotron

Made by

  • aj

Github activity

  • 123 stars
  • 15 watchers

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

Made by

  • Alberto Varela

Github activity

  • 2921 stars
  • 154 watchers

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: Fixed Table of Contents Drop-Down Menu jQuery Plugin

Made by

  • Louis Lazaris

Github activity

  • 53 stars
  • 0 watchers

JPANELMENU

A jQuery plugin that creates a paneled-style menu.

Demo image: jPanelMenu

Made by

  • Anthony Colangelo

Github activity

  • 956 stars
  • 86 watchers

VISUALNAV

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

Demo image: visualNav

Made by

  • Rob Garrison

Github activity

  • 68 stars
  • 8 watchers

Post navigation