25+ Perfect CSS Mobile Menus (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS mobile menu code examples. These will improve your website's mobile experience.
1. Mobile CSS Nav
Attempting to learn more about pure CSS transitions. Erik Terwan originally posted a pen similar to this and I've been experimenting with the code to see how it works.
Author: Mel Shields (shieldsma91)
Links: Source Code / Demo
Created on: July 30, 2018
Made with: HTML, CSS
Tags: hamburger-menu, side drawer, mobile, motion, css-only
2. Mobile Menu CSS Concept
A concept inspired by Daniel Korpai's Dribbble post.
Author: Kyle Lavery (kylelavery88)
Links: Source Code / Demo
Created on: January 22, 2018
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
3. Pure CSS Mobile Nav Animation
Author: Made On Mars (made-on-mars)
Links: Source Code / Demo
Created on: November 7, 2016
Made with: HTML, SCSS, JS
4. Animated CSS Mobile Menu Step By Step Slow-Motion
Author: Geoffrey Crofte (CreativeJuiz)
Links: Source Code / Demo
Created on: August 3, 2018
Made with: HTML, CSS, JS
5. CSS Mobile Menu Animation
Here is a handy mobile optimised navigation menu that sites at the bottom of the screen, the hamburger menu is conveniently placed in the center so it’s easily accessible by both left and right-handed users.
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: February 12, 2018
Made with: HTML, CSS, JS
Tags: hamburger, hamburger-menu, css animation hamburger menu, mobile-menu, mobile-navigation
6. Animated Accessible Navigation
Accessible, Progressive-Enhanced Navigation Menu with a circular animated background.
Author: Max Böck (mxbck)
Links: Source Code / Demo
Created on: May 17, 2017
Made with: HTML, SCSS, Babel
Tags: menu, accessibility, responsive, animation
7. Mike's Magical Mobile Mega Menu ✨
Author: tiffany choong (tiffachoo)
Links: Source Code / Demo
Created on: October 19, 2017
Made with: HTML, SCSS, Babel
8. Menu With Scroll & Hover Effects
Author: Ivan Bogachev (sfi0zy)
Links: Source Code / Demo, Dribbble.com
Created on: February 24, 2017
Made with: Pug, PostCSS, Babel
CSS Pre-processor: PostCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
9. Mobile Menu Style
Gonna keep adding additional menu styles as I think of them.
Author: Raiden Kaneda (Kaneda9)
Links: Source Code / Demo
Created on: April 7, 2017
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
10. Mobile Nav - Only Checkbox & CSS
CSS only mobile nav trigger and menus.
Author: Max Misnikov (maxim)
Links: Source Code / Demo
Created on: January 6, 2017
Made with: HTML, SCSS
Tags: mobile, css, navigation, menu, checkbox
11. Mobile Menu CSS Style
Author: Virgil Pana (virgilpana)
Links: Source Code / Demo
Created on: March 1, 2015
Made with: HTML, CSS, JS
12. Mobile Menu Slider Prototype
Author: Narendra N Shetty (narendrashetty)
Links: Source Code / Demo
Created on: May 15, 2016
Made with: HTML, CSS, JS
13. Pure CSS Navigation Simple & Easy
Author: Ravi Dhiman (ravid7000)
Links: Source Code / Demo
Created on: December 11, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-navigation, css navbar, css-menu, no js menu
14. Apple Style Mobile Menu
Inspired by mobile menu made by Apple. You can see it at http://www.apple.com/. Pretty easy but also pretty efficient in terms of visual impact! ;) Love the minimalist look of the 2 bars burger :)
Author: Mathieu Lavoie (theaftermath87)
Links: Source Code / Demo, Www.apple.com
Created on: November 27, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: apple, menu, mobile, css, burger
15. App Navigation
Concept for mobile app navigation.
Author: Ian Turner (iamturner)
Links: Source Code / Demo
Created on: May 1, 2016
Made with: HTML, SCSS, JS
Tags: mobile, app, navigation
16. Mobile Menu - CSS
CSS only mobile menu that opens an overlay.
Author: Daniel Hearn (danhearn)
Links: Source Code / Demo
Created on: January 2, 2017
Made with: HTML, SCSS
Tags: css, css-only, mobile-menu, menu
17. Swanky Pure CSS Drop Down Menu V2.0
Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: April 19, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, dropdown, menu, ui, ux
18. Pure CSS Navigation Simple & Easy
Author: Ravi Dhiman (ravid7000)
Links: Source Code / Demo
Created on: December 11, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-navigation, css navbar, css-menu, no js menu
19. Mob. Menu Only CSS
You can clone, donwload, fork... this mobile menu in GitHub. https://github.com/jokinL/Mobil-menu
Author: Jokin.L (JokinL)
Links: Source Code / Demo
Created on: April 17, 2015
Made with: HTML, Less, JS
Tags: css3, sass, html5
20. Colourful Flower Popup Menu
This mobile inspired flower popup menu is a colourful fun project I'm experimenting with. Feel free to use it however you like.
Author: Jasper LaChance (jasperlachance)
Links: Source Code / Demo
Created on: March 12, 2016
Made with: HTML, CSS, JS
Tags: menu, popup, flower, animated, colourful
21. Touch Device Jelly Menu Concept
What would you like to eat today? Will be great x with native implementation on touch devices My inspiration started here http://capptivate.co/2013/07/12/making-3/ Most of icons are Ashleigh Brennan's http://dribbble.com/ash-brennan Tried to explain it here: http://coding.smashingmagazin...Read More
Author: LegoMushroom (sol0mka)
Links: Source Code / Demo
Created on: August 12, 2013
Made with: HTML, CSS, JS
Tags: jelly, paperjs, menu-concept, uiux
22. Filter Menu
Filter Menu created by Anton Aheichanka that has been converted into web version. Here is the original link of https://dribbble.com/shots/1956586-Filter-Menu
Author: Arjun Amgain (arjunamgain)
Links: Source Code / Demo
Created on: June 26, 2015
Made with: HTML, CSS, JS
Tags: css, material design, ui, filter menu
23. Menu
Author: farnaz ahari (farnazishere)
Links: Source Code / Demo
Created on: August 9, 2020
Made with: HTML, CSS
Tags: transform, transition, farnazahari, trick, menu
More Awesome Lists:
Share: