Top 10 JavaScript & CSS Responsive Menus Of 2018

Here is a constantly updated list of the 10 best JavaScript and CSS based Responsive Menus we published on CSSScript.com. All of these responsive menus will auto switch between regular site navigation and mobile-friendly navigation depending on the viewport size. I hope you like it and don’t forget to spread the world.

Originally Published Nov 17 2017, updated Nov 30 2018

1. Responsive Multilevel Navigation Menu with Vanilla JavaScript

Mobile-friendly Responsive Menu With JS And CSS3 Media Queries

Demo Download

A simple vanilla JavaScript responsive multilevel menu that performs as a dropdown reveal menu on smaller screen devices. Built using CSS, Vanilla JavaScript and apollo.js JS library.


2. Mobile-friendly Responsive Menu With JS And CSS3 Media Queries

Mobile-friendly Responsive Menu With JS And CSS3 Media Queries

Demo Download

A mobile-friendly and fully responsive navigation that uses JavaScript and CSS3 to convert the horizontal menu into a toggleable dropdown list when the screen size is less than a specific breakpoint.


3. Responsive Hamburger Menu In Pure CSS

Responsive Hamburger Menu In Pure CSS

Demo Download

This is a CSS only responsive, multi-level menu that expands the hamburger toggle button into a horizontal drop-down nav on the desktop or an off-canvas side menu on mobile.


4. CSS Only Responsive Dropdown Menu – JMenu

CSS Only Responsive Dropdown Menu – JMenu

Demo Download

JMenu is a pure CSS responsive menu which automatically collapses the regular drop-down navbar into a mobile-friendly sliding menu with or without the toggle button.


5. Smart Responsive Sticky Navbar In JavaScript

CSS Only Responsive Dropdown Menu – JMenu

Demo Download

A smart responsive sticky navbar that automatically slides down and hides as you scroll down or up the webpage.


6. Multi-level Accordion/Dropdown Menu In Vanilla JavaScript – metisMenu

Multi-level Accordion/Dropdown Menu In Vanilla JavaScript – metisMenu

Demo Download

This is the vanilla JavaScript version of the jQuery metisMenu plugin that helps you create responsive, animated, accessible, accordion/dropdown navigation on the web app.


7. Responsive Scrolling Navigation In JavaScript – Bungie Bar

Responsive Scrolling Navigation In JavaScript – Bungie Bar

Demo Download

Bungie Bar is an Apple.com inspired responsive navigation that collapses the long horizontal nav into a scrollable menu with left/right navigation arrows on mobile devices.


8. Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller

Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller

Demo Download

Priority Nav Scroller is a pure JavaScript plugin to create a fully responsive, arbitrarily-prioritized navigation menu following the Priority+ Navigation pattern.


9. Responsive Navigation System For All Devices – CodeHim Menu

Responsive Navigation System For All Devices – CodeHim Menu

Demo Download

CodeHim Menu is a responsive navigation system for all devices. Written in HTML and CSS.


10. Responsive Mobile-friendly Nav System With JavaScript And Flexbox

Responsive Mobile-friendly Nav System With JavaScript And Flexbox

Demo Download

Yet another responsive, cross-platform navigation system that converts the horizontal menu into an off-screen hamburger navigation on the mobile device.