The Hamburger Menu Conundrum

Jan 17, 2021
Css
Share on Twitter
  • Navs are easy enough
  • But. Design makes them one of the trickiest things to implement.
  • Catering for with/without JavaScript.

It falls down to 4 different versions of your Nav...

  1. Mobile && No JavaScript. Maybe horizontal scroll overflow. No extra controls.
  2. Desktop && No JavaScript. Less issues, more real estate. No extra controls.
  3. Mobile && JavaScript. Sliding drawers. Button to open/close. aria-pressed, etc. Extra controls need to be catered for in your layout.
  4. Desktop && JavaScript. All guns blazing. Extra controls. The "desired" experience.

With a little planning, it's all good. The fancier the design, the trickier it can get.

If you go for horizontal scrolling on mobile with no JavaScript. How do you indicate to your users that they can scroll? Or do you merely go with stacking all your nav items with something like flex-wrap: wrap;?