Burger navigation menu with no javascript and no checkbox hack

Everyone loves a responsive navigation menu that hides under a burger icon on mobile devices. You may have seen a no-javascript version that uses a hidden checkbox to keep open/closed state, but here's an even easier way!

The code

Simply use the <details> element with a burger icon in the <summary> element, remove the list styling and you're good to go!

Pros

• 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.
• No javascript required means you won't frustrate users who want to open your menu before scripts have loaded.
• More accessible than the checkbox hack, since it uses the elements as intended.

Cons

• 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 😊)

Accessibility reminders

• 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.