DEV Community

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿
Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿

Posted on

An accessible SVG hamburger toggle

We've all been there - searching for the codepen of a navigation hamburger menu, but they never touch the spot - too much code, not accessible, messy... spending precious minutes or even hours looking for the right fit.

Pain, a huge pain.

Finally, I've had enough! I've created an accessible SVG based navigation hamburger toggle with a fancy animation that can be dropped into your navbar with (relative) ease.

I've always thought using three spans for each bar felt wrong, but I've never had the time to do anything about it... until now.

The link to the codepen is below - feel free to fork, change, and suggest improvements!

https://codepen.io/Joe45x/pen/WNpbzMR

Note: I'm no A11Y buff, so if the A11Y can be improved, please do share your knowledge!

Oldest comments (1)

Collapse
 
egilhuber profile image
erica (she/her)

Love the animation!