Sharing is caring!

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


The usage with HTML is super straightforward with few steps.

Getting the CSS

To keep the CSS lightweight, you should import only what you need!

You will find a corresponding style in the repository, follow the path ./packages/__YourBurgerStyle__/dist/styles.css

Download the file and link it to your html or copy it to your main file.

HTML markup

The html is super simple, this is an example using an arrow animation:

<div class="burger burger-arrow">

<div class="burger-lines"></div>


To display open state, simply add “open” class to the burger.

<div class="burger burger-arrow open">

<div class="burger-lines"></div>


If some animations require direction, such as arrow, you can simply add a class that will handle a direction, such as:

<div class="burger burger-arrow burger-right">

<div class="burger-lines"></div>


List of classes for different direction

  • burger-left (this is a default behaviour)
  • burger-right
  • burger-up
  • burger-down

List of classes for different animation

  • burger-arrow
  • burger-rotate
  • burger-slide
  • burger-slip
  • burger-squeeze

Using burgers in your React app

Each burger style is published as npm package separately, that means you are importing only what is necessary.

Include burger in your project

npm install --save @animated-burgers/{burger-style} classnames
// or using yarn
yarn add @animated-burgers/{burger-style} classnames

Use it in the code

// React Component
import Burger from '@animated-burgers/{burger-style}' 
// don't forget the styles
import '@animated-burgers/{burger-style}/dist/styles.css' 


// default state, other props are passed down to the wrapping element
<burger {...props}="">

// open state
<burger isopen="{" true="" }="">

// some burgers, such as arrow, supports direction
// (left - default, up, right, down)
<burger direction="right">

// By default, div will be rendered as a wrapping element
// You can pass a different wrapping component
<burger component="button" type="button">

// results in
<button class="burger" type="button>

<div class=" burger-lines"="">

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.