This is a collection of hand-picked free HTML and CSS hamburger menu icon code examples from CodePen, GitHub, and other resources. The collection was updated in August 2023 and includes 4 new items.

Hamburger menu icons are a staple in modern web design. They are used primarily in mobile web design to provide an easy-to-use navigation system that takes up minimal screen space. When clicked or tapped, these icons typically open up a side drawer or dropdown menu with additional site navigation options.

The collection includes a variety of designs that can be used as a starting point for your own projects. Each hamburger menu icon design has its own unique style and animation, so you can choose the one that best fits your website's design aesthetic.

Whether you're looking for a simple, minimalist design or something more complex and visually interesting, you're sure to find a hamburger menu icon design in this collection that suits your needs.

Happy coding!

Related Articles

  1. CSS Dotted Menu Icons

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Hamburger Menu with Rounded Edges

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Cassie Evans

Made with

  • HTML / CSS (SCSS)

About a code

Simple CSS Hamburger

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Danilo

Made with

  • HTML / CSS

About a code

Animated Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Vikram

Made with

  • HTML / CSS

About a code

SVG Interaction (Menu to Left Arrow)

Menu to left arrow interaction using SVG and CSS animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Hamburger Menu

A simple hamburger menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bilal.Rizwaan

Made with

  • HTML / CSS

About a code

Transforming Hamburger Menu

Hamburger menu icon transition using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About a code

Menu Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Florin Pop

Made with

  • HTML / CSS / JS

About a code

Moving Hamburger Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Obnoxious Burger

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Hamburger

A hamburger menu, remake of dribbble by Aaron Iker, whos shot is a remake by Leonid Arestov.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

Hamburger Animation

Hamburger animation & triple background color using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

Menu Button

Menu button and horizontal ellipsis transformation animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yacine

Made with

  • HTML / CSS

About a code

Minimal Animated Pure CSS Menu Icon

Minimal animated menu icon with pure CSS, can be also used with JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Hamburger 3D CSS Switch Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Akshay

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Hamburger Menu v2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Kowshik Kuri

Made with

  • HTML / CSS

About a code

Mobile Menu Icon Toggle Animation

CSS animation for mobile menu toggle SVG icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Flippin' Juicy Burgers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About the code

Hamburger Menu Button Interaction

Hamburger menu button interaction in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About the code

Hamburger Animation

Hamburger/Close icon transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Rhys Matthew P

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Click Highlighter on Menu Button Using :after

Using an :after pseudo element on a menu button, we can achieve a click highlighter effect. Similar to that of Google's Material Design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Elitsa Dimitrova

Made with

  • HTML / CSS / JavaScript

About the code

Hamburger Menu

Simple hamburger menu icon with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Sil van Diepen

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hamburger Menus

Menu CSS only effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: svd-full.css

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About the code

Flipping Burgers

A set of hamburger menu open/close animations in SVG, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • rosalieelphick

Made with

  • HTML / CSS

About the code

CSS Hamburger Menus

Hamburger menu animations, all with pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Tamino Martinius

Made with

  • HTML / CSS (PostCSS)

About the code

Hamburger Menu Animations

Four different menu animations for menu button toggle between hamburger, cross and back icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -