Using hamburger menus? Try sausage links (2019)
tdarb.org
tdarb.org
Tell it to the many people who have no idea what it means on a mobile device, or increasingly on desktop websites. I've said it many times before, but it's worth repeating: Most people are frustrated by modern information tools. According to a 2015 OECD computer skills study, <6% of Americans are level 3 (highest) while half have only basic skills and 20% can't use computers. (https://www.oecd-ilibrary.org/education/skills-matter_978926...)
I like the sausage link concept because it clearly labels options with text.
100%. I'm kinda surprised how the 3 lines hamburger menu got so prevalent in the first place, because it always user tests poorly. My guess is that when flat minimalism (my favorite shitty example of this is when Android expected everyone to know what a flat square, circle and triangle are supposed to mean) was the rage, even though user testing always showed a ton of people didn't know what the three lines meant, that designers felt it would eventually become "the standard" and people would know.
Problem is, years later, tons of people still don't know what it means - every time we do user testing, words do better. I think these days design fads change so frequently that there really isn't enough time for any design to be that "standard" long enough for everyone to really grasp it.
And in fact the designer is really not supposed to think about the content too hard. It's not how we do web. This is how we do: There's a CMS and you can add and remove items. How many? As many as the client later discovers they want.
It makes sense, kinda. It solves issues for different parties that are involved in the process. Like with touch screens in cars, we get something for what we give and it might just be the best we can reasonably do given constraints.
It's just not that great.
I thought this was a brilliant analogy. But you don't seem to have meant it.
> Like with touch screens in cars, we get something for what we give and it might just be the best we can reasonably do given constraints.
Touchscreens in cars are a huge step back from what we had in the 80s. They're far more despised than the hamburger menu. Complaints about the hamburger menu generally take a tone of disgruntled resignation. Complaints about car touchscreens are burning outrage.
There is no way touchscreens in cars can be the best we can do given constraints, because they're much worse than what they replaced.
It is not about how poorly touchscreens perform against what they replace, but what they enable: A continuously developed car, built around software (updates).
It pains me to even wonder what sort of "refreshed" UX paradigms each software update might decide to introduce.
"Modern" design is so opposed to any skeuomorphism that every item on the screen has been totally drained of color and detail. So many UIs are frustrating to use because everything is an abstract monochrome glyph. The extreme of fashion over function we're suffering right now is mind-boggling.
In the early 2000's we had books like Steve Krug's "Don't Make Me Think"; but now, for some reason, decades of design and engineering knowledge are being totally ignored, to society's great detriment.
Beautiful skeuomorphic controls, while also being lightweight and running quickly.
EDIT: I just went to Enlightenment's home page for the first time in a while and it's flat now ;_;
The three-lines version was an evolution of that, just chopping off the sides to go extra minimal, and happened very quickly.
And nowadays we have an even more minimal one, shortening the three lines to three dots.
At the end of a list of other menu entries, there's a chance that it can be inferred to mean "let's me see some more".
Just the lines is abstract geometry, like the navigation buttons on android; they don't mean anything on their own.
For an actual shitty example, look at Macos window button controls. Red yellow and green circles, they convey absolutely nothing, you're expected to learn them. Instead of slating this shitty design, everyone just rolls over and learns them.
The hamburger has no such lineage. It started as a menu icon and changed slightly but no one had any idea what even the initial icon meant without an explanation that it's a list.
The play and stop icons were icons that describe an operation of a machine that will then indirectly produce the outcome the user wants. They require the user to know how the machine functions. No one thinks "I would like the tape to move to the right" or "I would like the music to stop, which means the tape needs to stop moving, which means stopping the spools, which means selecting the least circular shape".
No, they don't. That's why they worked so well and was my entire point. All people needed to know was that they wanted to go forward, backward, or stop movement in whatever music or video was playing and that's a clear metaphorical and symbolical link. Someone with no knowledge of the function could walk up to a tape recorder and infer what the symbols meant in relation to what was happening.
The hamburger menu is not even intuitively a list and there's no connection that a user presented with it would recognize it as a call for a menu/list. There are plenty of user studies that confirm this.
We did multiple usability studies over years for a company I worked at that built a very popular mobile app. The tests were standard usability test format, where we'd ask a user to complete a task and then just say "go" and figure it out. Times where the user had to find something in the hamburger menu, when we replaced the 3 lines with words like "MENU" or "MORE" always tested better.
Designers pretty much universally hated the text version, and I do appreciate the localization challenges, but the results weren't ambiguous.
Aren't you just describing all collapsible menus? I thought the complaint about the hamburger menu was specifically that the icon is unclear. It seems odd to disparage all collapsible menus, particularly on mobile where it's very easy to have a small number of reasonable menu options with no way to possible fit them onto the screen without a way to collapse them.
Just about every prior type of navigation is better.
(Square, circle, and triangle is also the old Electronic Arts logo, but that's probably not the reason.)
What is this referring to?
Edit: I'm so used to these buttons that I didn't even realize they were just simple flat shapes. It definitely would be confusing for someone new to Android or for someone who's not good with tech.
Completely unintuitive to anybody that's never used Android before.
Contrast that to the early days of Android where the Back button was a curved arrow, the Home button was an icon of a house, and the Menu button was the hamburger menu people are familiar with, except the lines were thinner.
[0] This may actually vary depending on what phone you have and if the maker changes these, but on my Pixel 6, this is the description.
iOS is pretty similar in that a good number of the navigation gestures aren't super intuitive and not really discoverable until you build some muscle memory.
Also the triangle is only an arrow on my phone and the circle is an oval.
https://icdn.digitaltrends.com/image/digitaltrends/android-1...
Funny enough, I had 2 android devices that had differences of opinion on what order these should be in.
This is a problem which could get solved if every mainstream media presents this icon for 30 seconds with a short explanation for one week during the main news hour. Or every newspaper would dedicate 1/4 of a page to it for one week.
Viewers educated, problem solved. Make an exception for such an important icon.
I personally find the sausage link horrible. I have to scroll by picking the scroll bar with the mouse because the scroll wheel is not working in the demo, and it's anything but a compact display of information, unlike what you get with a drop-down popup menu.
And that also prompted me to confirm that it would delete the proxy and the Extensions that were installed.
I remember a few more apps being like that. So there ARE hooks, just not used universally. AND it won't delete personal files or preferences related to the app, which is what users are expecting these days when they delete an app, UNLESS it's an app installed from the App Store, because those store prefs and data in a different folder than regular apps..
I would be interested if someone could point me to the mechanism used for that (triggering application-specific uninstall logic upon dragging the application to the trash).
She's switched 80% of her use to an iPad and the rest to a Mac laptop, and I get a question about once a year.
YMMV.
Now though, it's just weird to have the menu bar at the top of the screen. And it's especially strange when there's no windows for the application left but the menu bar for it is still visible (something that wouldn't be strange in the single app at a time model)
- Turning off yet again the annoying computer voice announcing any navigation or volume change on my parents' new Samsung TV (accessibility option, not sure why it turned on, but it required me visiting their home in person again to turn it off)
- Trying to help my father disable the "get Outlook for iOS" line that suddenly started to be appended to the bottom of his work emails.
- Helping my spouse troubleshoot a Shopify app feature that prevents >1 item being subtracted from inventory at a time
- Figuring out how to enable a social media save shared photos to her phone's photo album
Yes, sometimes software is so complicated and feature rich these items have to buried deep in the settings. But often I find that the lack of obvious text labels for basic features and navigation items is the problem. Hamburger menus and the three dots "more actions" icon are a poor substitute for clear text labels and links.
Hell, I don't like that stuff either (does anyone?) but it's just a minor annoyance for me. For them it can mean they give up trying to do whatever they wanted to do.
I would bet in almost all cases, these can be directly attributed to the developer company's poorly devised career incentives. Behind every full-screen "OMG CHECK OUT WHAT'S NEW" takeover or notification-spam lies a product manager or engineering manager whose bonus is tied to some vanity measurement of how many users are engaging with the new feature they launched. "How much of the user's attention and screen space can I take over in order to try to jam this unwanted feature down their throat and show huge usage numbers next performance review?"
For this one, I don't think it's a software update but rather user error (though it's not clear even to me how).
I myself have accidentally enabled it, there seems to be some combination of buttons on the remote that will enable it. Still not sure on the specific combo though.
I can see why FF and Chrome hide it by default. Most of the actions tucked away in it are either used infrequently, or have common keyboard shortcuts. Turning it on in Firefox makes the chrome feel cluttered to me.
By exporting the application's menu bar to an OS-provided panel that includes other OS-provided functions (clock, status indicators, wireless controls), they enforce both a strong level of consistency while allowing for reduced window clutter.
If you go to the "Customize Toolbar" page, on the bottom left where it says "Toolbars v" you can check "[ ] Menu Bar". Hope that helps (a little)!
Perhaps there is some issue with internationalization, but I've been to restaurants in 30+ countries, and "Menu" seems to be pretty universally-used word.
On mobile, with such a drag operation, I suppose one could place a finger between menu items so as to not select anything while dragging.
The very large health care company I work for now is currently redesigning their global nav. We've had no less than 10-15 design working sessions. The same thing that continually comes up is the hamburger menu and how to handle it.
The reason is the company did some pretty extensive research with seniors (a big chunk of our clientele) and found many don't have any idea the hamburger menu is a standard menu now for both desktop and mobile apps. We were told we either have to use it minimally, or not at all. Its been a struggle to find something that everybody can agree on. We have a very small team of 5 people - 2 designers, 2 devs and myself (accessibility) working on this.
I also happen to work in accessibility which many of the apps/sites that use hamburger menus on mobile either create keyboard traps or are totally unusable for screen readers. I'm at least happy our company is trying to move to something different.
I'd be less frustrated if I could file bugs that would get to the developers of an app / website / etc and get the issues that drive me nuts fixed. Take Google Maps: it has built in menu options to report data errors, but what about bugs with the software itself? Sometime last year a bug was introduced where if I start typing the address in "too fast" before the page finishes loading, the address characters will appear out-of-order. It's a classic FIFO / LIFO ordering bug. I suppose it's my fault for thinking I could type as soon as the text widget becomes visible on the page.
The hamburger menu is literally used everywhere. Why should we design things for tech illiterate boomers. The most popular apps and websites use it. It's ubiquitous.
The hamburger menu takes someone explaining it to you just one time to know what it is every time.
The hamburger menu looks like decoration, or a portion of the I Ching. Nothing about three horizontal lines says "I contain options for navigation."
Now, were six lines used, with every other line being indented, and then a \ or a / here and there, it would look like something folded up, and I would think, "Oh, unfold this thing." But three horizontal lines just ... no, I got nothin'.
I personally view the hamburger menu similar to my junk drawer at home. It's where the designer stuffs crap that isn't very important. So, it's the last place I look for when I need to get something done in an app.
I don't know the equivalent works for phone or tablet users with no such thing (AFAIK) as hover. To me, that's a problem with such interfaces beyond the hamburger icon.
And it’s hard to describe icons to someone else on the phone. I‘m not sure if Word is still the mess it used to be, but this kind of interface design can be really hard to understand and learn. Currently for me this is Blender. The software is complex, the interface mirrors this, but if you’re new to it, this is really hard to learn.
First of all, the whole problem domain has to be taught/discovered. And sure, people often learn by trial-and-error and it makes sense to try to maximalize this sort of discoverability in all software, but I would say that it doesn’t scale. Even with the “better” labeled menus, gimp is not intuitive to say the least.
So perhaps the (often annoying) teach you by showing is the better direction? My gripe with it is that it is often applied for trivial mobile apps for things like “search by using the search bar”.. but I think an all-menu/all-action text-based search functionality would be a must as well.
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.
So it probably won due to discoverability rather than usability.
So on average more people now navigate the menu, but doing so is a less pleasant experience for those “in the know” before.
As someone who has JS disabled by default I was happy to see this and excited to see what 'sausage links' look like, but when I went to the link I was hit with a giant "CodePen requires JavaScript to render the code and preview areas in this view."
Since this person has a website (this isn't a tweet or something) and feels it's "Pretty simple, eh?" to implement such a menu, _and_ already wrote up some sample code, why not have the example on the page itself? At least I have the code so I can copy/paste and throw it back in the browser, but the author came soooo close to making that unnecessary I can't help but wonder what happened or what their thought process was.
"Zero JavaScript needed" isn't just my personal preference, it's explicitly stated as being desirable by the author. I fully expect to be That One Weird Guy who doesn't like running random code on his system from untrusted remote sources, but here the author states _himself_ that not needing javascript is preferable, so it's just a very weird choice that he decided to have the only live example be in the form a link to a third party site that requires javascript, especially after he went through the trouble of writing up a simple demo on his website but only as source when he could have also used that same code to provide a live demo of the thing being discussed. If I'm going to write a whole webpage about something, it just seems natural to display the thing being discussed on that same page when possible.
I'm not even really complaining exactly, I'm just confused as to how someone managed to line up all of those dots, but never take that last step to connect them.
>Better suited for small to medium menu lists compared to massive sitemaps
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.
- the notification widgets popped out from the right of my screen
- The entire center-aligned blocks of text on the page moved over in relation to my scrolling for some reason
- The browser navigated "back"
- The H scroll bar appeared for a few seconds then went away
Some of these were due to my cursor being outside of the 'nav class="sausage-links"' tag, but it seems strange to expect a user to first place their cursor inside of an invisible box somewhere around the nav strip to be able to navigate it by scrolling to and fro.
Seriously, H scroll is way overloaded, and there are so many ways to subtly "do it wrong". That, combined with the lack of affordance to show users that "there is more to see here if you scroll left and right" makes this a really poor UX.
This one kind of makes sense to me. It's the browser's way of telling you "you're doing the right thing to scroll the whole page over, but there's no content outside of your viewport so we'll just snap you back after we let you peek to see for yourself".
The rest... yeah, it's definitely an overloaded pattern.
https://sourcegraph.com/search
https://sourcegraph.com/search?q=context:global+errorf&patte...
However.
My totally irrelevant opinion on Sourcegraph is that it does a really good job of balancing high information density (which I love) with comprehensibility.
Of course I don't love the hamburger menu, but if it works for your users, great. The top-level menu items are few and seem well-differentiated, although I haven't dug in too deeply. I think you could probably do an iOS-style tab bar, but I know they don't always work too well on the web, and it might eat into your vertical real estate. No hamburger on desktop, which is nice.
Where it shines is in the filters, which are tremendous. Really, really easy to understand, and the response time when you click one is very fast.
Love the contrast, colors are pleasing. Spinny logo is cute and fun.
OK, now ignore all of that and listen to your users instead. :)
Ir seems like you can hide all the items (hamburger menu), hide some of the items (sausage links or overflow menu), or have a deep hierarchical navigation.
While breadcrumbs were fairly established on desktop, mobile apps typically only have a single-level back/up button. It's easy to lose your place if you have a deep hierarchy. Are there are good solutions for this?
But the best strategy is always to simplify the number of different nodes to flatten navigation as much as possible.
Just put it behind a media query when your desktop-sized nav bar gets too big?
Edit: Oh yeah, and horizontal scrolling interacts unpredicatably with horizontal gestures on mobile. E.g. forward/back in iOS Safari.
I disagree, it’s not easily discoverable and I have yet to see a single website that implements it well in any context. I alway find elements scrolling multiple directions at once or end up scrolling down the page instead.
Similarly, it's bad to assume that everyone is always using a keyboard and mouse (a frustration I encounter in Desktop environment communities (e.g. Gnome / Linux) in gesturing that some use tablet PCs).
I have a project that could have many menu items, and the sausage is an interesting idea but not common/well known enough that I'd want to use it. Tabs might work.
For many websites, there are SEO implications to having menu links (or so we are lead to believe) so I think ridiculous menus are sometimes partly a consequence of optimizing for SEO.
This is certainly true of Safari, the default web browser for iOS, to the point where even trying to cycle through a horizontal slideshow of images can bait the user into accidentally going back to the previous page.
Not only that, but on iOS I believe it was/is possible to cycle between open apps with a very similar gesture as going back/forth in browser history -- this already proved pretty dumb for browser usability and would prove worse still for horizontal scrolling elements on websites.
Personally, I like to operate my mobile device one-handed a lot of the time, and at the very least I'm not scrolling websites or switching back/forward with both hands even if I'm holding the device with both hands.
So the last thing I want to do, especially if I'm carrying something in one hand, is to have to try and stretch my thumb to the far side of the phone to scroll through a horizontal menu.
My other argument against this sausage menu idea, which has been around far longer than the date of the linked article, is that on many viewport sizes your links may not be half-occluded by the edge of the screen. Given that mobile browsers tend to hide their scrollbars, since without a cursor the scrollbar is just a progress indicator w.r.t. how far down the page you are.
Thus, on some screen sizes -- and it isn't difficult to encounter, given how many different devices there are out there -- n links will be visible in full before the edge of the screen, and then there may not necessarily be any visual hint that there are more menu items to scroll to. So you don't discover that there are more menu items until you accidentally scroll that region.
Finally, I would argue that even for the technophile the hamburger menu is preferable at this point, simply because they have been conditioned by a good decade's worth of responsive web design UX. The sausage menu, being often an edge case, is less obvious even to the technophile purely because not many sites elected to do it that way.
* * *
It seems to me that the superior alternative to both hamburger and sausage menus would be to adopt the hamburger menu style, but simply replace ≡ or the menu icon with the word "Menu"
The hamburger style can be done without JS too. If you really want to avoid JS, just use :target selector or other CSS shenanigans.
Every time I scroll horizontally I die a little.
In my opinion, that's what's so nice about them; natural to scroll on mobile, and probably not requiring any scrolling on PCs.
If the items don't entirely fit on most PC screens, then I would take that as a hint that there's too many items for a sausage menu to be a good solution. (subsequently reaching for hamburgers, reducing the number of items, or exploring other options... eg. a sausage menu could also be more than one line?)
Even if, it's annoying one missclick and you might land somewhere else.
Like it works just fine in mapping apps, which naturally align to a 2d canvas, but why does it feel so lousy to use with almost any other form of information?
Is it because we write left-to-right, top-to-bottom? So text chunks fit better with no horizontal scrolling? (I think this is also why vertical tabs are so much better than horizontal tabs).
I think a large part of it is that horizontal navigation as in OP is too thin, so if you do these natural dragging shapes your finger leaves the scrollable area. It may still work fine, but it feels wrong. Vertical scrolling on the other hand, because of what you say with our writing style, has a much larger grab area so we can easily stay within the box.
There's also parts specific to it being a menu: A vertically-aligned one usually has empty space on the right because the menu items probably aren't the same length, giving you a nice "grab area" (either your finger with touch or a place to put the mouse pointer for a scrollwheel) that doesn't hide anything. Plus scanning down a list is easier than sideways anyway because every item starts at the same place; just imagine how annoying it is to read a bulleted list on here when someone accidentally puts it all on one line because they didn't add an extra blank line between bullets.
Currently, it's also rare for webpages to feature horizontal scrolling, so by habit most users scroll vertically to access new information.
Discovery is also another reason mentioned by users elsewhere in these comments. Since horizontal scrolling is a rare behaviour, a clear signifier [0] is needed to quickly communicate that horizontal scrolling is a possibility, which is an extra problem that other potential methods don't have.
[0] https://sites.google.com/site/thedesignofeverydaythings/home...
To demonstrate, I've forked the example and set the main element to 625px wide instead of 600px - https://codepen.io/onion2k/pen/mdpVWmr
Not a fan but could be forced if needed.
Based on - https://stackoverflow.com/a/7855592/1342097
Gestures are required, text disappears horizontally, no visual indicator that you may have to scroll horizontally… I don’t know, maybe I’m wrong, but I’ve also been a fan of the hamburger menu since it arrived.
With the sausage menu, at least as screenreader user, you will have less issues as you can tab through a list of links immediately without the need to open a broken menu . Also scroll position is adjusted by the browser automatically to the element in focus, so it isn't even a problem for keyboard users with eyesight.
Normally I wouldn't be so nitpicky, its not an outright bad design by a long shot, but when you are literally writing about website design I feel it's okay to expect a little more
Another negative not mentioned in the article: they're biased toward touch and trackpad users. My browser (and probably most browsers) hides the scroll bar by default, so anyone using a vertical scroll wheel mouse is going to be confused and/or have some kind of difficulty scrolling.
At first I didn't even know that the example in the article was functional! I thought it was a screenshot.
Hamburger menus function the same for all platforms, are easy for non-technical people to figure out (especially by this point), they also don't have to be a hamburger (they can be a word that says "Menu," or some other kind of icon like a settings gear), and they can expand to a regular menu that quickly shows all possible options.
An alternative I thought of: a grid of colorful/contrasting icons with text (example: The Uber app for mobile). I think sometimes you shouldn't be afraid of taking up screen real estate if your app needs to have a lot of options.
I'm not a fan of them. I'd rather have and use a drop down menu. I think they're more intuitive and compact.
"Adds an additional point of interaction from the user (click to open, then proceed to read through available options)"
The real world impact of this downside cannot be emphasized enough. People click on things they can see by several factors more (sometimes 10 times more) compared to the "clean design" approach. This is why in very large companies there's internal political battles on which links get to be placed in this prime digital real estate.
Sausage links is a weird name though. They're horizontally scroll-able menu items, which can be anything: links, icons, pills, combinations.
As for this creating an ugly scrollbar on desktop, this pattern is for about 6-8 links max, which should all horizontally fit without a scrollbar on desktop.
As for the "problem" of this not supporting longer lists of links or even hierarchical links, don't bother, because those don't work anyway. I work on very large ecommerce sites and in one case (billion+ page views across 80 countries) even a 3 tier navigation structure found only 8% of users actually using it. And the trend is downwards, as mobile traffic is now 70%. Nobody navigates beyond level 1.
Finally, some polish for the demo: scroll fading should be stronger so that people get that it is horizontally scrollable. Also, use CSS scroll snapping. This way when people give a strong swipe, it doesn't keep going when you let go, it snaps into a favorable position.
I'm not even sure how I would horizontally scroll with a mouse (I seem to remember something about hold middle clicking and dragging).
Why not just have all the links in multiple rows or have a few subcategories + expand and navigate through the list of links?
The text on these sausage links makes the buttons quite visible and readable, but I find these joined buttons to be most helpful when one is always active and the options are mutually exclusive. For example, at the bottom the zoom buttons (1x, 0.5x, 0.25x) do this very well. One is always highlighted so it's very easy to understand the current state and to pick a different state.
I'd argue this works less well in the top-left buttons (HTML, SCSS) because there is a hidden behavior that collapse and expands the sidebar. It's clever, but I didn't expect the bar to open, nor did I expect it to close when I tapped it a second time. It workes pretty well in this website preview example because html/css feels like good use of the side panel, but I'd argue most hamburger buttons hide much more rarely used views like logout, account and privacy settings, payment options, etc, so not sure the sausage links can replace all these, but an interesting thought experiment.
</luddite>
Hamburger menu: sort of, if my phone is small enough. Once I reach the menu I need only o e glance and one finger tap to select an option. I can remember where the option is located. Two short taps, looking at the screen twice.
Sausage links? I won’t even try. It requires to scroll horizontally a very small area, while watching it continuously. It doesn’t allow to see all options together. It doesn’t allow to remember where each option is located.
IMO sausage links is a dark pattern to hide menu options. It requires a very complex interaction just to see all available options.
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.
Not sure how realistic this is. When I look at most websites these days, I can see clear signs of bad engineering (and lack of ethics) everywhere.
I am totally on board with the idea to use CSS for things, where we do not need JS. But then again I am not a "modern style" web developer.
In my opinion knowing one or two hip and trendy web frameworks (I will intentionally not say their names now.) doesn't make anyone a good web developer. Real basics are lacking these days. When you only have a hammer, everything starts looking like the head of a nail. Websites with zero requirement of dynamic pages are rendered in JS frameworks, even taking longer than static server side rendering of some template, which could have been used, given the character of the websites. All done under the guise of "This is how websites are developed these days." No, not all websites need to be a SPA.
Anyone, who learned a framework can call themselves web developer these days. I am sure there are good web developers out there, who know their stuff and the basics as well. Even good ones working on the websites I criticize, but they may be forced to use inappropriate tooling by their environment. One does not simply come into an existing project and decide oneself to change a whole stack. Basically many projects are already locked into their inappropriate use of tools.
https://www.nngroup.com/articles/hamburger-menu-vs-pizza/
However, Pizza Windows are another alternative to Pizza Menus:
https://medium.com/@donhopkins/the-story-of-sun-microsystems...
More like "I'm just trying to bring awareness to my blog, and go down in UI history as the person remembered for the term sausage link menu".
The sausage links I remember were older than internet on mobile being a thing, they were laid out vertically, and they were proportional in size to the target sections such that clicking a link or clicking the scrollbar right at their side would essentially scroll you to the same place on the page.
They were, in my opinion, a much better paradigm than this.
Alas I cannot easily find the demo page again. It might have been lost to history.
I think one significant advantage of sausage links is that they feel less uniquely intended for any single form factor.
You could resolve this by connecting the sausages with a line. The continuity would give the user a hint that something is going off to the right.
These remind me of what Material Design called Chips.
Same idea, but vertical scrolling 3 items at a time and the list is a circular linked list.
I can't be the only one that's tired of hieroglyphs and controls whizzing everywhere.