25+ Open Source CSS Toggle Menus - Free
These free, CSS toggle menu code examples will improve your website. They are easy to install and come with all the code you need.
1. Vertical Layout With Navigation
Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.
Author: Ettrics (ettrics)
Links: Source Code / Demo
Created on: April 7, 2015
Made with: HTML, SCSS, JS
Tags: vertical, layout, navigation, animation, responsive
2. Vertical Color-adapting CSS Menu
Simple vertical animated CSS hamburger menu with that adapts to the background color using mix-blend-mode.
Author: Ines Montani (ines)
Links: Source Code / Demo
Created on: February 20, 2016
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css3, ui, menu
3. Hidden Menu CSS
Author: José Reyes González (jreyesgs)
Links: Source Code / Demo
Created on: December 5, 2016
Made with: HTML, SCSS
4. Pure CSS Toggle Menu
Its a simple toggle menu for header.
Author: Akshay Nair (phenax)
Links: Source Code / Demo
Created on: August 7, 2015
Made with: HTML, SCSS, JS
Tags: toggle, menu, material, css
5. Simple Nav
Simple "bubble"-style navigation. Saw something similar on a newspaper's mobile site (I can't remember which one) and wanted to try and make it myself.
Author: Travis (trhino)
Links: Source Code / Demo
Created on: December 28, 2013
Made with: Pug, SCSS, CoffeeScript
CSS Pre-processor: SCSS
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
Tags: navigation, flat, minimal
6. Menu Toggle Button With Flat Menu
Menu toggle button with flat menu. Uses CSS transitions and Vanilla JS.
Author: Geoffrey Crofte (CreativeJuiz)
Links: Source Code / Demo
Created on: June 13, 2013
Made with: HTML, CSS, JS
Tags: menu, toggle, button, flat, ui
7. Gooey Menu
Gooey menu with CSS and SVG filters. Version 1
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: January 25, 2015
Made with: HTML, SCSS
Tags: goo, menu, css, svg, filter
8. CSS Gooey Menu Version 2
Gooey menu with CSS and SVG filters. Version 2
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: January 25, 2015
Made with: HTML, SCSS
Tags: css, goo, effect, menu, filter
9. CSS Gooey Menu Version 3
Gooey menu with CSS and SVG filters. Version 3
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: January 25, 2015
Made with: HTML, SCSS
Tags: css, goo, effect, filter, menu
10. CSS Gooey Menu Version 4
Gooey menu with CSS and SVG filters. Version 4
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: January 26, 2015
Made with: HTML, SCSS
Tags: css, goo, effect, filter, menu
11. PURE CSS SIDEBAR TOGGLE MENU
Author: Jelena Jovanovic (plavookac)
Links: Source Code / Demo
Created on: March 21, 2018
Made with: HTML, CSS
12. Toggle Social Menu
Have all your websites' social media clearly displayed on a page. Colours used as a background for each icon matches primary colour used by specific social media. It is also very nicely animated so that it give really good user experience.
Author: Maciej Caputa (MaciejCaputa)
Links: Source Code / Demo
Created on: May 18, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: menu, toggle-menu, social-media, side-menu
13. Animated Toggle Menu
Author: Ahmed Hussien (a7med-hussien)
Links: Source Code / Demo
Created on: March 15, 2016
Made with: HTML, CSS, JS
Tags: html, css, javascript
14. Slide Toggle Navbar With Pure CSS
There it is a navbar with a slide toggle animation using only html and css. It is mostly for phones.
Author: fabran99 (fabran99)
Links: Source Code / Demo
Created on: March 1, 2019
Made with: HTML, CSS
Tags: slidetoggle, slide css navbar, slide toggle navbar, slide toggle css
15. Pure Css Off Canvas Menu
This time I made an off canvas menu with just css. It quite simple to make a offcanvas menu, no javascript is needed. Take a look, sure you'll get it have fun, cheers
Author: Saief Al Emon (iamsaief)
Links: Source Code / Demo
Created on: July 2, 2020
Made with: HTML, SCSS
Tags: css, no-js, off-canvas, toggle-menu, menu
16. Menu Toggle (Animate Menu Icon To Close) With Sidebar Sliding From Left
Toggle Menu using CSS (animate the icon to close) with Sidebar Sliding from the left. Forked from Grant's Pen Menu toggle (animate menu icon to close) with Sidebar sliding from left.
Author: Marco (msanc)
Links: Source Code / Demo
Created on: January 23, 2016
Made with: HTML, CSS, JS
Tags: menu-toggle, sliding-sidebar, sidebar-slide, toggle-animate-to-close
17. Mobile Menu Toggle With CSS Transitions & JS Fallback
Author: Gabriel Luethje (isGabe)
Links: Source Code / Demo
Created on: May 22, 2013
Made with: HTML, SCSS, JS
18. Responsive Slide Toggle Menu
Author: Philippe (Philippe_Fercha)
Links: Source Code / Demo
Created on: May 17, 2014
Made with: HTML, CSS, JS
Tags: nav, menu, toggle, slide, responsive
19. Pure CSS Hamburger Toggle Menu
Author: Nave Avimor (Nave)
Links: Source Code / Demo
Created on: October 11, 2017
Made with: HTML, CSS
20. Pure CSS Toggle Menu
Simple toggle menu where the red circle expands to the full width of the screen. Done purely in html and css (Sass)
Author: cschembri (cschembri)
Links: Source Code / Demo
Created on: January 10, 2019
Made with: HTML, SCSS, JS
Tags: menu, toggle-menu, hamburger-menu, css-animation
More Awesome Lists:
Share: