Simply use the <details> element with a burger icon in the <summary> element, remove the list styling and you're good to go!
- The most maintainable code is no code at all! You can have a nice burger menu with only a few lines of CSS - you'll thank yourself later.
- More accessible than the checkbox hack, since it uses the elements as intended.
- It doesn't support opening and closing animations, since the browser will immediately show/hide anything not in the <summary> element.
- If you are already using third-party components, they might include an easy-to-use, feature-filled burger menu you don't have to maintain yourself.
Do you need a burger menu at all?
Remember to ask yourself this question! If you only have a few navigation links, why not just use a flexbox row with flex-wrap? Then you don't have to have a separate mobile navigation menu and breakpoints to hide and show. (Yes that also applies to this website, but I was having fun and decided to do it anyway 😊)
- For the button, don't use a unicode character like this one: ☰, or someone using a screen reader will hear "Trigram for Heaven" when they just want to find your contact page.
- Make sure your button has an accessible label using the title or aria-label attributes.
- If you have a separate desktop and mobile navigation menu, make sure only one is visible in the accessibility tree as well as visually! Use display: none or visibility: hidden.