Animated CSS burger component
Animated CSS burger component Animated CSS burger component

These burgers are available as plain html/css or as React components. This burger component is part of the Dashboard UI Kit 3.0.

Animated CSS burgers is a lightweight collection of animated hamburger menu icons available as plain HTML/CSS or individual React components.

The main features and integration options include:

  • Multiple Animation Styles: Offers distinct burger animation styles, including Squeeze, Slide, Slip, Rotate, and Arrow.

  • HTML/CSS & React Support: Can be used as plain HTML markup with lightweight CSS files or installed as individual modular npm packages (@animated-burgers/{burger-style}) for React applications.

  • Directional Variations: Supports animation directions (left, right, up, down) for directional styles like arrow transitions.

  • Flexible State & Element Wrapping: Toggles open states cleanly via an open class in HTML or an isOpen boolean prop in React, with support for custom wrapper components (e.g., rendering as a <button> element via the Component prop).

  • Font-Size Based Scaling: Scales fluidly using em units based on font-size (with a baseline of 12px), making size adjustments as simple as changing the element's font size.

  • Custom Color Overrides: Allows developers to easily change line colors by targeting .burger-lines and its pseudo-elements (:before and :after) in CSS.

Animated CSS burger component

Animated CSS burger component
Frontend
May 21, 2019

You may also be interested in ...

Animxyz

Animxyz

AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Arrow JS

Arrow JS

Reactivity without the Framework. A tiny ~2kb library for building reactive interfaces in native JavaScript.
Hyperapp

Hyperapp

The tiny framework for building web interfaces. Hyperapp is a modern VDOM engine with a declarative syntax that's easy to read and natural to write, Hyperapp is your tool of choice to develop purely functional, feature-rich, browser-based applications.