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