Top 10 JavaScript & CSS Responsive Menus Of 2017

Here is a constantly updated list of the 10 best JavaScript and CSS based Responsive Menus we published on 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.

10. Style Responsive Navigation With Pure CSS – Slackie.css


Demo Download

Slackie.css is a pure CSS implementation of a responsive, mobile-friendly site navigation inspired from

9. Responsive Dropdown Nav Menu With Pure CSS

Responsive Dropdown Nav Menu

Demo Download

A fully responsive, CSS only multi-level navigation that automatically collapses the regular horizontal menu into a toggleable dropdown menu on small screens.

8. CSS Flexbox Based Responsive Navigation

CSS Flexbox Based Responsive Navigation

Demo Download

A CSS only responsive site navigation that automatically converts the normal horizontal nav into a sliding hamburger menu. Based on CSS transition, flexbox and checkbox+label tricks.

7. Responsive Multilevel Navigation with Pure JavaScript & CSS – menio


Demo Download

menio is a standalone, mobile-friendly JavaScript navigation system which automatically turns a normal horizontal multilevel menu into a vertical dropdown menu as the screen sizes reaches a specific breakpoint.

6. Minimal Responsive Dropdown Navigation In Pure CSS


Demo Download

A pure CSS multi-level dropdown navigation that will be converted into a mobile-friendly toggle menu in small screens.

5. Responsive Priority Navigation With Pure CSS

Responsive Priority Navigation With Pure CSS

Demo Download

A responsive, CSS only priority navigation that automatically collapses overflowing menu items in a toggleable dropdown menu in mobile view.

4. Material Style Responsive Dropdown Navigation with Pure CSS


Demo Download

A pure CSS / CSS3 approach to creating a Material Design, fully responsive navigation menu with smartly aligned, multi-column dropdown sub menus.

3. Responsive Drawer Navigation In Pure CSS


Demo Download

A responsive navigation solution which uses input:checked pseudo selector to reveal a drawer menu sliding from the left or right hand side of the screen. You can change the breakpoint through media queries in the CSS.

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

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