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.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai

1. Mobile CSS Nav

CSS Mobile Menus - 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)
Created on: July 30, 2018
Made with: HTML, CSS
Tags: hamburger-menu, side drawer, mobile, motion, css-only

2. Mobile Menu CSS Concept

CSS Mobile Menus - Mobile Menu CSS Concept
A concept inspired by Daniel Korpai's Dribbble post.
Author: Kyle Lavery (kylelavery88)
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

CSS Mobile Menus - Pure CSS mobile nav animation
Author: Made On Mars (made-on-mars)
Created on: November 7, 2016
Made with: HTML, SCSS, JS

4. Animated CSS Mobile Menu Step By Step Slow-Motion

CSS Mobile Menus - Animated CSS Mobile Menu Step By Step Slow-Motion
Author: Geoffrey Crofte (CreativeJuiz)
Created on: August 3, 2018
Made with: HTML, CSS, JS

5. CSS Mobile Menu Animation

CSS Mobile Menus - 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)
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

CSS Mobile Menus - Animated Accessible Navigation
Accessible, Progressive-Enhanced Navigation Menu with a circular animated background.
Author: Max Böck (mxbck)
Created on: May 17, 2017
Made with: HTML, SCSS, Babel
Tags: menu, accessibility, responsive, animation

7. Mike's Magical Mobile Mega Menu ✨

CSS Mobile Menus - Mike's Magical Mobile Mega Menu ✨
Author: tiffany choong (tiffachoo)
Created on: October 19, 2017
Made with: HTML, SCSS, Babel

8. Menu With Scroll & Hover Effects

CSS Mobile Menus - Menu with scroll & hover effects
Author: Ivan Bogachev (sfi0zy)
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

CSS Mobile Menus - Mobile Menu Style
Gonna keep adding additional menu styles as I think of them.
Author: Raiden Kaneda (Kaneda9)
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 Mobile Menus - Mobile Nav - only checkbox & CSS
CSS only mobile nav trigger and menus.
Author: Max Misnikov (maxim)
Created on: January 6, 2017
Made with: HTML, SCSS
Tags: mobile, css, navigation, menu, checkbox

11. Mobile Menu CSS Style

CSS Mobile Menus - Mobile Menu CSS Style
Author: Virgil Pana (virgilpana)
Created on: March 1, 2015
Made with: HTML, CSS, JS

12. Mobile Menu Slider Prototype

CSS Mobile Menus - mobile menu slider prototype
Author: Narendra N Shetty (narendrashetty)
Created on: May 15, 2016
Made with: HTML, CSS, JS

13. Pure CSS Navigation Simple & Easy

CSS Mobile Menus - Pure CSS Navigation Simple & Easy
Author: Ravi Dhiman (ravid7000)
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

CSS Mobile Menus - 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)
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

CSS Mobile Menus - App Navigation
Concept for mobile app navigation.
Author: Ian Turner (iamturner)
Created on: May 1, 2016
Made with: HTML, SCSS, JS
Tags: mobile, app, navigation

16. Mobile Menu - CSS

CSS Mobile Menus - Mobile Menu - CSS
CSS only mobile menu that opens an overlay.
Author: Daniel Hearn (danhearn)
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

CSS Mobile Menus - 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)
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

CSS Mobile Menus - Pure CSS Navigation Simple & Easy
Author: Ravi Dhiman (ravid7000)
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

CSS Mobile Menus - Mob. Menu Only CSS
You can clone, donwload, fork... this mobile menu in GitHub. https://github.com/jokinL/Mobil-menu
Author: Jokin.L (JokinL)
Created on: April 17, 2015
Made with: HTML, Less, JS
Tags: css3, sass, html5

20. Colourful Flower Popup Menu

CSS Mobile Menus - 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)
Created on: March 12, 2016
Made with: HTML, CSS, JS
Tags: menu, popup, flower, animated, colourful

21. Touch Device Jelly Menu Concept

CSS Mobile Menus - 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)
Created on: August 12, 2013
Made with: HTML, CSS, JS
Tags: jelly, paperjs, menu-concept, uiux

22. Filter Menu

CSS Mobile Menus - 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)
Created on: June 26, 2015
Made with: HTML, CSS, JS
Tags: css, material design, ui, filter menu

23. Menu

CSS Mobile Menus - menu
Author: farnaz ahari (farnazishere)
Created on: August 9, 2020
Made with: HTML, CSS
Tags: transform, transition, farnazahari, trick, menu
NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai