27 Best CSS toggle menus

By | December 17, 2020

Collection of hand-picked free CSS toggle menus. All the collections are included with Demo and source codes.

Author

  • Victor Freire
  • January 20, 2016

Made with

  • HTML / CSS

About the Code

Burger Menu inspired by Material Design

A simple checkbox burger menu inspired by Material Design for Android.

More info: Link

Dependency:

Author

  • Mathieu Lavoie
  • January 22, 2016

Made with

  • Pug / SCSS / JavaScript

About the Code

Apple style mobile menu

Inspired by mobile menu made by Apple. Pretty easy but also pretty efficient in terms of visual impact! 😉 Love the minimalist look of the 2 bars burger.

More info: Link

Dependency:

Author

  • Kabir Singh
  • March 12, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Fixed Menu Pop Up

A simple fixed pop up menu – tested on Android and Iphone.

More info: Link

Dependency:

Author

  • John Riordan
  • March 11, 2017

Made with

  • HTML / SCSS

About the Code

Tumblr inspired menu (pure css)

No JS. Inspired somewhat by the Tumblr iPad app post creation menu. Could use animations rather than transitions with different timing on each menu item to fancify it a bit. I just wanted to keep this as simple and straightforward as possible.

More info: Link

Dependency:

Author

  • alan dunning
  • November 14, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

jQuery / CSS navigation menu

Simple jQuery / CSS hamburger style menu button with pop out menu

More info: Link

Dependency: jquery.min.js

Author

  • BJack
  • March 12, 2014

Made with

  • HTML / SCSS / JavaScript

About the Code

Mobile Menu

Playing around with some menu burger action. Menu slides down from the top, while the menu trigger animates to the close button, and vice versa.

More info: Link

Dependency: jquery.min.js

Author

  • Mojtaba Seyedi
  • February 7, 2020

Made with

  • HTML / SCSS

About the Code

CSS Toggle menu

More info: Link

Dependency:

Author

  • Aaron Awad
  • March 1, 2018

Made with

  • HTML / CSS / JavaScript

About the Code

Multi-level Side Nav Menu

This is a multi-level side navigation pattern with hover and push. Hovering over the menu will reveal its labels and clicking the hamburger icon pins the menu open.

More info: Link

Dependency: font-awesome.css, jquery.min.js

Author

  • Long
  • March 27, 2019

Made with

  • HTML / SCSS / JavaScript

About the Code

Elastic menu

More info: Link

Dependency:

Author

  • Akshay Nair
  • August 14, 2015

Made with

  • HTML / SCSS

About the Code

Pure CSS Toggle Menu

Its a simple css toggle menu for header.

More info: Link

Dependency:

Author

  • Ines Montani
  • February 20, 2016

Made with

  • Pug / Sass / JavaScript

About the Code

Vertical color-adapting CSS menu

Simple vertical animated CSS hamburger menu with that adapts to the background color using mix-blend-mode.

More info: Link

Dependency:

Author

  • Trevor Lang
  • March 9, 2016

Made with

  • Pug / Sass

About the Code

Pure CSS Menu Drawer

I have questions about the usability of something like this, but it is a handy way to create a slide out drawer without javascript.

More info: Link

Dependency: jquery.min.js

Author

  • Una Kravets
  • February 1, 2014

Made with

  • HTML / SCSS / JavaScript

About the Code

Animated Menu

a simple menu for my portfolio

More info: Link

Dependency: jquery.min.js

Author

  • Alex Coven
  • December 6, 2017

Made with

  • HTML / CSS

About the Code

Material More Button CSS

More Info button with material design style. Let me know if you’ve seen something like this. Used input:checked and a checkbox to build this, then used a tags to protect the click from unchecking the checkbox.

More info: Link

Dependency:

Author

  • Mikael Ainalem
  • October 8, 2019

Made with

  • HTML / CSS

About the Code

The more menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

More info: Link

Dependency:

Author

  • Hadar Weiss
  • June 22, 2015

Made with

  • Haml / SCSS

About the Code

Pure CSS Circle Menu

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.

More info: Link

Dependency:

Author

  • El Alemaño
  • November 4, 2020

Made with

  • HTML / SCSS

About the Code

Dot Menu with Buttons

More info: Link

Dependency:

Author

  • Lucas Bebber
  • January 26, 2015

Made with

  • HTML / SCSS

About the Code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4

More info: Link

Dependency: jquery.min.js

Author

  • Lucas Bebber
  • January 26, 2015

Made with

  • HTML / SCSS

About the Code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3

More info: Link

Dependency: jquery.min.js

Author

  • Lucas Bebber
  • January 26, 2015

Made with

  • HTML / SCSS

About the Code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2

More info: Link

Dependency: jquery.min.js

Author

  • Lucas Bebber
  • October 22, 2015

Made with

  • HTML / SCSS

About the Code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1

More info: Link

Dependency: jquery.min.js

Author

  • Bryce Snyder
  • March 2, 2018

Made with

  • HTML / Stylus

About the Code

Pure CSS3 Parallax Menu

Using only CSS creating a slide out menu with animations with pseudo siblings and checkbox. Also works with mobile.

More info: Link

Dependency: bootstrap.min.css

Author

  • Sasha
  • May 15, 2020

Made with

  • HTML / SCSS

About the Code

Floating Action Button

More info: Link

Dependency:

Author

  • Jasper LaChance
  • May 24, 2017

Made with

  • HTML / CSS

About the Code

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.

More info: Link

Dependency: font-awesome.min.css, jquery.min.js

Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.