10 Best JavaScript & CSS Responsive Menus (2021 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 14 2021

Table Of Contents:

Pure CSS Responsive Menus:

1. CSS Only Responsive Dropdown Menu – JMenu

CSS Only Responsive Dropdown Menu – JMenu

Demo Download

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.


2. Pure CSS Mobile-compatible Responsive Dropdown Menu

Pure CSS Mobile-compatible Responsive Dropdown Menu

Demo Download

A pure CSS responsive menu created by andornagy that automatically changes to a toggleable dropdown menu at a specified breakpoint based on CSS3 media queries.


3. CSS Only Responsive Hamburger Navigation

CSS Only Responsive Hamburger Navigation

Demo Download

Yet another responsive, mobile-friendly hamburger navigation menu for your cross-platform web pages. Implemented with pure HTML and CSS/CSS3.


4. Multi-level Toggle Responsive Navigation Menu using Pure CSS

Multi-level Toggle Responsive Navigation Menu using Pure CSS

Demo Download

A pure CSS mobile-friendly navigation that automatically transform your horizontal navigation into a toggleable vertical accordion menu on smaller screen devices, with support for unlimited sub menu items.


5. Responsive Pure CSS Dropdown Navigation Menu

Responsive Pure CSS Dropdown Navigation Menu

Demo Download

A fully responsive, CSS-only navigation that breaks down into a hamburger dropdown menu when the viewport size is smaller than a breakpoint specified in the CSS3 media queries.


Pure JavaScript Responsive Menus:

1. Smart Responsive Sticky Navbar In JavaScript

Smart Responsive Sticky Navbar In JavaScript

Demo Download

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


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


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


4. Responsive Show / Hide Navigation Menu with JavaScript and CSS3

Responsive Show / Hide Navigation Menu with JavaScript and CSS3

Demo Download

A mobile-friendly responsive navigation system that uses CSS3 media queries to detect the screen size and transforms the regular horizontal navigation into a show / hide menu with a toggle button on small screens.


5. Responsive Dropdown Menu In Vanilla JavaScript

Responsive Dropdown Menu In Vanilla JavaScript

Demo Download

A Vanilla JavaScript responsive dropdown menu that will be converted into a hamburger toggle menu when the screen size is less than a breakpoint you specify in the CSS media queries. Smooth animation is based on CSS3 transforms and transitions.


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: