Responsive menu patterns: ten native CSS and HTML techniques

Compare ten realistic ways to solve responsive navigation, from the checkbox hack and `details` to `popover`, `dialog`, `aria-expanded` and WAAPI, so you can choose the right mechanism instead of copying one pattern everywhere.

How much do you know about CSS?

📘 Theory

Four families of solutions

Before choosing a style, choose the opening mechanism.

The ten snippets fall into four families: pure CSS, native HTML behaviors, minimal JavaScript for state and richer JavaScript for animation.

Pure CSS is attractive for simple menus and quick demos, but it can become rigid when you need outside-click closing, dynamic height coordination or multiple synchronized states.

Native APIs such as `details`, `dialog` and `popover` reduce code and solve part of the accessibility model for you. They are especially compelling when your browser support target makes them viable.

Patterns with no JavaScript or almost none

These are easier to maintain when navigation does not require complex logic.

This group includes the checkbox hack, `:has()`, `details` and menu patterns that simply reflow links with Grid instead of collapsing into a burger panel.

Their main strength is clarity: the visual state lives in HTML and CSS, so the component is easier to inspect, test and port between projects.

The downside is flexibility. Once the interaction needs richer behavior, the pattern can become awkward to extend without bringing in JavaScript anyway.

Checkbox hack and `:has()` work well when the state is basically open or closed.
`details` and `summary` are especially useful for simple disclosure-style navigation.
A responsive Grid layout can avoid the burger pattern altogether if the menu can reflow cleanly.

Patterns with minimal or expressive JavaScript

Use them when the interaction adds real value, not out of habit.

The snippets based on `aria-expanded`, `classList` and measured heights show a practical middle ground: small JavaScript that keeps attributes, visual state and accessibility aligned.

WAAPI goes further by defining animation keyframes in JavaScript itself, which gives you tighter control over timing, stagger and spatial rhythm than a simple class toggle.

The professional rule is that state should still stay understandable. If neither the user nor the developer can tell what is opening the menu and why, the pattern will not scale well.