10 Best JavaScript & CSS Responsive Menus (2020 Update)

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

Demo Download

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

Responsive Multilevel Navigation Menu with Vanilla JavaScript

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.


3. 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.


4. 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.


5. 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.


6. Responsive Collapsible Navbar In Vanilla JavaScript – Collapsible

Responsive Collapsible Navbar In Vanilla JavaScript - Collapsible

Demo Download

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

Responsive Header Navigation With JavaScript And CSS Flexbox

Demo Download

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

Responsive Hamburger Sidebar Navigation In Pure JavaScript - Omega.js

Demo Download

Omega.js is a modern responsive mobile-first navigation system for the web.


9. Responsive Navigation Bar With Flexbox And JavaScript – simply-nav

Responsive Navigation Bar With Flexbox And JavaScript - simply-nav

Demo Download

A simple, lightweight, sticky, fully responsive, mobile-compatible navigation system built using JavaScript and CSS flexbox.


10. Smart Responsive Dropdown Navigation Bar – Animenu

responsive-dropdown-animenu

Demo Download

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:

You Might Be Interested In: