SVG Hamburger Menu

Programming - Mar 31, 2024

Three stripes should be such an easy thing to draw. Here’s a bunch of different ways to do it on the web. That said, SVG is definitely the nicest way to handle it. A hamburger menu is so simple that we can draw it by hand in SVG.

Three rectangles, evenly distributed:

<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>

Feel free to fiddle with those numbers to get the sizing and style you like.

Something awesome you might not know? SVG has rounded corners, just like CSS has border-radius! It comes in the form of the rx attribute. Check it out:

That might work better for your design if your design is softer and makes use of rounded stuff.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More