Recent searches
Search options
Dear product designers / web devs:
You should avoid hamburger menus on the mobile web 9/10 times.
1. No one implements them correctly
2. Most fail when JavaScript is disabled - leaving site navigation useless
3. A list of your navigation options works better for screen readers / keyboard movement
Just say “No” to hamburger menus.
I was thinking a lot about this previous post recently, so I wrote up a quick post:
"Stop Using Hamburger Menus"
@tdarb
I need to buckle down and take the time to implement a mobile navigation menu based on the <details> tag. :)
@tdarb Absolutely true. Also I can't stand the name. Giving tech support to family "click the hamburger menu" "the what??" "sigh..."
@tdarb almost every hamburger menu I've built has been CSS :hover tricks on symantically correct, often nested, <ul> trees. Unfortunately iOS Safari doesn't properly support hover classes so I then have a JS script to fake them under iOS:
https://www.qweb.co.uk/js/ios-hover.js if interested in that script.
It's annoying that JS is needed there, but since Safari users aren't likely to disable JS it's basically fine, and if CSS is disabled the menu will render as a text tree.
Graceful degradation is the key.
@tdarb
That face when a 90's Geocities site loads faster and runs better than most of the modern web.
@tdarb they are bad
This, the little balls variant, all the odd shaped variants, they’re all bad
They’re bad because they occlude
You can’t see what’s inside them – you can’t even see why you’d even want to open one of them
That’s assuming you’ve been indoctrinated by the design gatekeeping to have been forcefully educated into recognising that these things are actually an affordance that does things instead of a passive decoration for no real reason, which most normal people would take it for
If you want to hide some options, hide some menu items, hide some vital information, use one of these stupid things – otherwise, don’t
@jrp Yes and I have done that many times in the past. My main point is I don't think hamburger menus are needed at all; javascript or not.
This also tackles: How would you propose to keep things accessible for people who can't afford to always run the newest devices with bigger screens otherwise? (not a polemic question, really)
Simplest approach:
1. A link in the header of the page set as "Links" or "Pages" etc.
2. User clicks this and jumps down to the bottom of the page where all site links are listed
3. At the top of the page links list is a "back to top"
There are zero downsides to this approach besides hurting designers' pride.
I don't mind them too much on websites or even mobile, but I find them insulting and infuriating on the desktop.
(any/all experimental) @tdarb i never really thought about links at the bottom instead of at the top (what i have currently)
having links at the bottom could allow considerably more links without the problem of pushing away the article (my links have spacing so it's easy to distinguish: https://jacksonchen666.com/posts/2022-04-07/20-09-00/)
now that i think about it, i could get rid of the "skip to content" link while having more links elsewhere. might have to limit myself to 2 links on the top as i might go too far with the top links.
Just when I think I've tinkered enough with my own small site idea ( inspired by the 1mb club and a few others ) along comes another good idea and it's back to the tinkering mode...
Good idea and agree with the key points
[Scribbles note for the Corporate Intranet...]
@tdarb
Sooo I opened this post, looked at the date, and got completely thrown for a loop since I thought it was saying you posted this on May 5th. XD
@tdarb An interesting approach!
One very minor note on your implementation: You should still use a ul with li's in your header nav element, despite only having the two links, since if you press the next key when navigating with a screenreader while focused on the home link, it currently brings you to the next section, rather than the next item in the menu.
@tdarb I do agree with you. Hamburger menus - especially those that won't work without #JavaScript - should be eradicated.
However, your proposed solution of puttint the navigation at the bottom of the page doesn't solve one of the problems created by hamburger menus: The navigation options aren't visible after loading the page, so visitors cannot see at a glance what's on offer. I think the navigation should be at the top of the page whenever possible, even if it takes up screen space. 1/2
@tdarb A book has table of contents at the beginning, I think we should aim to normalise putting a table of contents (at least the first level of navigation) at the start of the page and incorporate that into #WebDesign. Most print media offers an overview of "what's there" in the beginning, so why not the #web?
I think it should be okay to cover half of a phone screen with a table of contents before the page body begins.
.@tdarb interesting!!! I do use hamburger menus, particularly with mobile.