Yummy! Burgerlicious is the animated burger icon you always wanted.
SVG-based, customizable via SASS, dependency-free.
Some love it, some hate it: The burger icon, a three-lined icon synbolising a navigatable list. Why its Usability is debatable, it's for sure a neat and clean way to hide the bigger kind of menus behind a simple button.
So, if you're searching for a beautifully animated burger icon based on SVG and SASS - you're there, you got it! Have fun!
Browser compatibility:
Due to the IE not being able to animate SVG via CSS, animations won't work in this browser! Progressive Enhancement at its best!
Using this burger means simple copy-pasting code into your project (mainly because including HTML files in the frontend, without backend / build steps, is quite a pain). The following files exist:
src/burgerlicious.html
contains the HTML part, in particiular the burger icon as SVGsrc/burgerlicious.scss
contains the styles as SASS, incl. variables & animations
This project also comes with a build step (
npm run build
) to turn the SASS into plain CSS.
Once included, you can toggle the burger on and off using the is-open
class on the svg (with the class burgerlicious
).
The following SASS variables can be used to customize the design of the burger:
$burgerlicious--color
defines the line color (defaults to#333
)$burgerlicious--weight
defines the line stroke width (preferably even numbers) (defaults to2px
)$burgerlicious--animation-speed
defines the complete animation duration (defaults to.5s
)$burgerlicious--animation-rotation
defines the animation rotation direction (left
orright
) (defaults toright
)
Both usability and accessibility of the burger menu could be improved by:
- placing the burger inside an actual
<button type="button">
node - making the burger button more affordable
- adding a short label such as "Menu" or "Navigation" below or above the burger icon
- putting a tooltip on top of the icon (e.g. using the
title
attribute) - adding accessibility nodes to the SVG, such as
<title>
ordesc
- disable animations if the user prefers reduced motion / no motion at all