TOP 36 CSS Hamburger Menu Icons

HAMBURGER MENU BUTTON INTERACTION

Hamburger menu button interaction in pure CSS.

See the Pen Hamburger Menu Button Interaction by Himalaya Singh (@himalayasingh) on CodePen.

HAMBURGER ANIMATION

Hamburger/Close icon transition.

See the Pen Hamburger animation by Aaron Iker (@aaroniker) on CodePen.

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.

See the Pen Click highlighter on menu button using :after by Rhys Matthew (@rhyspacker) on CodePen.

HAMBURGER MENU

Simple hamburger menu icon with little jQuery.

See the Pen CSS Challenge – Day 2 by Elitsa Dimitrova (@bella_elle) on CodePen.

HAMBURGER MENUS

Menu CSS only effects.

See the Pen Menu test – css only – effects by Sil van Diepen (@silvandiepen) on CodePen.

FLIPPING BURGERS

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

See the Pen Flippin’ burgers by Mikael Ainalem (@ainalem) on CodePen.

CSS HAMBURGER MENUS

Hamburger menu animations, all with pure CSS.

See the Pen CSS hamburger menus by rosalieelphick (@rosalieelphick) on CodePen.

HAMBURGER MENU ANIMATIONS

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

See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.

BUTTON NAVIGATION

Animated button nav (single element with drawing style) by using CSS & JavaScript.

See the Pen Menu Button #3 by Amli (@uzcho_) on CodePen.

MENU ICON WITH A SPIN

See the Pen Menu icon with a spin by Sean B (@Chesswithsean) on CodePen.

HAMBURGER ICON WITH CHECKBOXES

See the Pen #CodePenChallenge – Fun with Checkboxes by Tony Banik (@banik) on CodePen.

HAMBURGER MENU

See the Pen hamburger menu by Gareth (@nissacjg) on CodePen.

HAMBURGER ICONS ANIMATIONS

CSS hamburger icons with great hover states and animations.

See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.

FLIPPING MENU TOGGLE

What the flip is this? Not ideal for production but here’s a fun menu toggle experiment with CSS animations.

See the Pen Flipping Menu Toggle by Ryan Mulligan (@hexagoncircle) on CodePen.

COOL HAMBURGER TOGGLE EFFECT

Creative hamburger toggle effect.

See the Pen Cool hamburger toggle effect by Kriszta (@vajkri) on CodePen.

HAMBURGER BUTTON

Sexy hamburger button.

See the Pen Sexy hamburger button by Rodrigo Sousa (@rodrigosousa) on CodePen.

HAMBURGER OPEN ANIMATION

HTML, CSS and JS hamburger open animation.

See the Pen Hamburger Open Animation by Sarath AR (@sarath-ar) on CodePen.

SVG MENU ANIMATION

Hamburger menu animtion with svg element.

See the Pen SVG Menu Animation by thelaazyguy (@thelaazyguy) on CodePen.

HAMBURGER ICON ANIMATION

Simple CSS hamburger icon animation with little jQuery.

See the Pen Hamburger Icon animation by Ajay (@AjayBear) on CodePen.

MENU ANIMATION

Hamburger menu animation.

See the Pen Menu animation by Valery Alikin (@AlikinVV) on CodePen.

HAMBURGER MENU BUTTON

HTML, CSS and JavaScript hamburger menu button.

See the Pen Hamburger Menu Button by José Rosário (@JoseRosario) on CodePen.

3D HAMBURGER TRANSFORMICON

3D hamburger transformation with HTML, CSS and JS.

See the Pen 3D Hamburger Transformicon by Bennett Feely (@bennettfeely) on CodePen.

Click Me! Hamburger Menu

Original shot https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue

See the Pen Click me! Hamburger menu by Alexandr Izumenko (@Izumenko) on CodePen.

HALF SECOND HAMBURGER HELPER

A showcase of hamburger menus.

See the Pen Half Second Hamburger Helper by Kurt Petrek (@KPCodes) on CodePen.

Hamburger Icon Animations

12 hamburger icon animations.

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.

Atomic Hamburger Menu CSS

HTML and CSS atomic hamburger menu.

See the Pen Atomic Hamburger Menu CSS by Alex Coven (@alcoven) on CodePen.

Hamburger Icon Animations

Hamburger icon animations in HTML, CSS and JavaScript.

See the Pen Hamburger Icon Animations by Carlos (@carlosriera) on CodePen.

Animated Burger/Menu Icon

HTML, CSS and JavaScript animated burger/menu icon.

See the Pen Animated Burger/Menu Icon by Nicholas M. Smith (@icutpeople) on CodePen.

Hamburger Menu Elastic

Hamburger menu elastic with HTML, CSS and JavaScript.

See the Pen hamburger menu elastic by Davide Cantelli (@cant89) on CodePen.

20 Menu Buttons To Hamburger

Menu button to hamburger. Styled & animated with pure CSS.

See the Pen Menu button to Hamburger – styled & animated with pure CSS by Yinxi Chen (@kaylolo) on CodePen.

Animated Menu Icon

Animated menu icon toggling between hamburger for open and X for exit.

See the Pen Animated Menu Icon by Eric Grucza (@egrucza) on CodePen.

Simple Navbar Toggle To X (Vanilla JS)

A simple CSS and JS solution to make a standard Navbar “hamburger” into an X on click, and then back to a hamburger when clicked. Requires no dependencies, written with vanilla JS.

See the Pen Simple Navbar Toggle to X (Vanilla JS) by Joseph Gengarella (@Wyrlor) on CodePen.

Expanding Hamburger Navigation Icon

Expanding hamburger menu that displays the intent of the button more clearly than a typical hamburger menu icon.

See the Pen Expanding Hamburger Navigation Icon by Ryan Canfield (@canfie1d) on CodePen.

Hamburger Menu Animation

Just another hamburger menu animation.

See the Pen Hamburger Menu Animation by Sebastian Popp (@sebastianpopp) on CodePen.

Drawn Hamburger Transition

More fun with hamburger icon transitions.

See the Pen Drawn Hamburger Transition by Jesse Couch (@designcouch) on CodePen.