Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

Burger

General
Simple
Rotate
Fade
Doble collapse
Triple collapse
Full collapse
Unify
Rotate v2
Bounce
Flipped Collection
Flipping
Flipping v2
Flipping v3
Flipping v4
Flipping v5
Flipping v6
Flipping arrow
Flipping arrow v2
Distorted Collection
Distorsion
Distorsion v2
Distorsion v3
Arrow Distorsion
Arrow Distorsion v2
Chevron
Arrows Collection
Arrow up
Arrow right
Arrow down
Arrow left
Disfigured Collection
Arrow bottom
Arrow right
Arrow left
Cross
Chevron
Plus
Minus
Tasty Hamburgers
Slider
Squeeze
Arrow
Arrow alt
Arrow turn
Spin
Elastic
Emphatic
Collapse
Vortex
Stand
Spring
Minus
3DX
3DY
3DXY
Boring

How it works

Burger is the element used as the open/close toggle at all Menu elements available at Next Bricks by default.

Settings controls

Type: there are 8 burger types available. All of them shown at the demo.
Reverse: if enabled, the animation will play in reverse mode.

Style controls

Width: determines Burger dimensions.
Color and height: Burger lines are strokes. Their color and height have to be set here. You can also set a color when toggled.
Sharp: if enabled, Burger will be sharp instead of rounded. Some burgers work with border-radius property instead of Sharp.
Stroke spacing: determines the spacing to be set between lines. It is specific to only the burgers that allow it.

Animation controls

Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

-Tamu

On this page