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 20 2022
Table Of Contents:
Pure CSS Responsive Menus:
1. CSS Only Responsive Sticky Navbar
A responsive sticky navbar that coverts the nav items into a full-width off-canvas menu with a hamburger toggle button.
2. CSS Only Responsive Dropdown Menu – JMenu
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.
3. Pure CSS Mobile-compatible Responsive Dropdown Menu
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.
4. Multi-level Toggle Responsive Navigation Menu using Pure CSS
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
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. 17+ Responsive Accessible Header Navbar Templates
A set of 17+ accessible, fully responsive, and mobile-friendly header navbar templates for modern web app design.
2. Responsive Multi-level Dropdown Menu For Navbar
A Vanilla JavaScript library that makes it easier to create responsive, mobile-friendly, multi-level dropdown menus for the navbar of your cross-platform web app.
3. Responsive Offcanvas Menu For Bootstrap 5
A responsive off-canvas navigation system that combines with Bootstrap 5 off-canvas and navbar components.
4. Responsive Single-level Dropdown Menu With JavaScript
Yet another responsive single-level dropdown navigation that works perfectly on both desktop and mobile.
5. Responsive Mega Menu In JavaScript
A modern, responsive mega menu template for online stores. Written in Pure JavaScript and CSS/CSS3.
More Resources:
To download more responsive menus for your modern website & web app, here are a few more resources available online: