On our website we do a similar thing. But we just wrap the navigation to multiple lines. Of course, that only works when you don't have that many navigation items. But when there are only few of them, I prefer wrapping over having to scroll.
Using hamburger menus? Try sausage links (2019)
11–20 of 208 posts
Re: Using hamburger menus? Try sausage links (2019)
#12It adds a scrollbar or else some kind of cue that scrolling is available. Horizontal scrolling in desktop feels unnatural personally. And finally, the oval links look like tags in an article, not navigational controls. That last point could be adjusted by squaring off the buttons, by adding a symbol between links indicating a nav path, or something like that.
Not to mention when using a laptop it would be easy to unintentionally trigger a “navigate back or forward” browser event when scrolling horizontally. Such an annoying browser feature.
Re: Using hamburger menus? Try sausage links (2019)
#13Better known as pill navigation
I think of pill navigation as connected, like: (___|____|___)
These remind me of what Material Design called Chips.
Re: Using hamburger menus? Try sausage links (2019)
#14Sometime back UberEats switched from a hamburger to a sausage menu for the restaurant’s menu categories and I really feel the experience is worse overall for it.
While I suppose it’s now more obvious that the categories are there, it’s way less usable trying to scroll left and right to see them compared to before where you scrolled up and down the old vertical hamburger menu.
On a related note, it’s incredible to me that Uber never seeks feedback on whether or not you think something in their app is crap, they only ever ask you for feedback on riders and restaurants as if they’re the only aspect of the experience that could possibly be poor.
Re: Using hamburger menus? Try sausage links (2019)
#15Horizontal scrolling should be avoided in almost all cases.
Re: Using hamburger menus? Try sausage links (2019)
#16No post body was provided.
Re: Using hamburger menus? Try sausage links (2019)
#17The bulk of my browsing is done with JS turned off, and I'm astonished how many sites rely on a JS-powered hamburger menu, so I have to enable JS on specific sites just to use their menu! There are pure CSS ways to do hamburger menus, and I encourage all devs to use pure CSS for a hamburger menu for those visitors who browse with JS disabled by default!
For those curious: I have JS turned off because of privacy reasons, and accessibility. I find having JS turned off decreases the amount of annoyances and popups you see when browsing, and the 'fingerprintability' of the browser is drastically reduced.
Re: Using hamburger menus? Try sausage links (2019)
#18No no no. Hamburger menus are terrible[0] for navigation, and this is worse. The only user-centric "Pro" listed by the author, namely that users understand its functionality, is totally unsubstantiated, and I think, exactly the opposite of what is true.
These kinds of menus are fine as "filtering inspiration", shortcuts for commonly chosen filters on a dataset, but they are not at all OK as general navigation. They hide the vast majority of menu items, especially in a long list; their sorting logic is typically impenetrable; and horizontal scrolling is terrible on a huge array of devices.
On mobile, prefer a tab bar for navigation. If you have a huge number of top-level items, deeply consider your information architecture before downgrading to a hamburger menu. I won't go on, but I could.
Please do not use this ridiculous thing for navigation.
Re: Using hamburger menus? Try sausage links (2019)
#19I thought this was presented as a tongue in cheek kind of thing, but I guess its not. =(
Re: Using hamburger menus? Try sausage links (2019)
#20Clear menus that aren't hidden away are great, but a significant problem with horizontal 'sausage' menus is that it isn't obvious that you can scroll, especially on Apple devices that hide scrollbars. The article mentions this as a bit of an after-thought ("Without proper fade / cut off visual cues, users may not understand they can scroll") but it's the key reason why you should avoid them.
To demonstrate, I've forked the example and set the main element to 625px wide instead of 600px - https://codepen.io/onion2k/pen/mdpVWmr