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 Feb 07 2020
1. Responsive CSS Only Header Navigation – Luxbar
Luxbar is a CSS library used for creating a responsive, mobile-friendly header navigation that is fully customizable via CSS classes.
2. Responsive Multilevel Navigation Menu with Vanilla JavaScripts
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.
3. Mobile-friendly Responsive Menu With JS And CSS3 Media Queries
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.
4. Multi-level Accordion/Dropdown Menu In Vanilla JavaScript – metisMenu
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.
5. Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller
Priority Nav Scroller is a pure JavaScript plugin to create a fully responsive, arbitrarily-prioritized navigation menu following the Priority+ Navigation pattern.
6. Responsive Collapsible Navbar In Vanilla JavaScript – Collapsible
The Collapsible library automatically collapsible the nav items into a dropdown menu with a hamburger toggle button, when there’s not enough screen space.
7. Responsive Header Navigation With JavaScript And CSS Flexbox
A Responsive Header Navigation that collapses the horizontal navbar into a dropdown menu by altering the flex-direction property on small screens.
8. Responsive Hamburger Sidebar Navigation In Pure JavaScript – Omega.js
Omega.js is a modern responsive mobile-first navigation system for the web.
9. Responsive Navigation Bar With Flexbox And JavaScript – simply-nav
A simple, lightweight, sticky, fully responsive, mobile-compatible navigation system built using JavaScript and CSS flexbox.
10. Smart Responsive Dropdown Navigation Bar – Animenu
Animenu is a lightweight responsive dropdown navigation system that collapses the horizontal navbar into a hamburger toggle menu on mobile devices.
More Resources:
To download more responsive menus for your modern website & web app, here are a few more resources available online:
