Animated CSS burger components

Using HTML/CSS

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>
</div>

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

<div class="burger burger-arrow open">
  <div class="burger-lines"></div>
</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>
</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">
</button>

List of available burger packages

• @animated-burgers/burger-arrow
• @animated-burgers/burger-rotate
• @animated-burgers/burger-slide
• @animated-burgers/burger-slip
• @animated-burgers/burger-squeeze

Styling the burger

You can change the properties of the burger by overriding a class or adding a class. Here are some tricks you can use with these burgers. If you want to modify different properties, you can always check the source SCSS files. You can find them in the repository:

// base styling
packages/Burger/styles.scss
// + custom styling
packages/{burger-style}/styles.scss

Changing Colour

You can change the properties of the burger by overriding a class or adding a class. Here are some tricks you can use with these burgers. If you want to modify different properties, you can always check the source SCSS files.

Changing Colour

To change the color of the burger, add few lines in your css.

.burger .burger-lines,
.burger .burger-lines:after,
.burger .burger-lines:before { background-color: red; }

Changing size

The size is scaling based on the font-size. The dimensions of the lines are set by em values. The baseline is set to 12px.

<!-- smaller -->
<div class="burger burger-squeeze" style="font-size: 8px">
  <div class="burger-lines"></div>
</div>

<!-- default -->
<div class="burger burger-squeeze">
  <div class="burger-lines"></div>
</div>


<!-- larger -->
<div class="burger burger-squeeze" style="font-size: 18px">
  <div class="burger-lines"></div>
</div>

results into