IMO there's an even better design, which is to not hide links in an expandable menu at all.
Just show all the links at once! With appropriate headers and visual hierarchy to provide organization, this is better in pretty much every way: faster to use, easier to implement, and more accessible.
The biggest practical objection I see to this kind of "flat" menu is simply that it's hard to make it look good at the top of a page. But any competent visual designer should be able to manage that, aesthetically.
As a related point, stop trying to shove the entire site navigation into a minimal top menu.
Your site is probably just leaving more than half of the screen of desktop users blank, and phone users can gain a lot from a top menu that actually does what it says and an expanded menu that takes the entire screen and lets them see what they are doing.
People keep reevaluating how they implement the top menu, keep finding their implementation harmful, and yet do not stop to question the menu itself... No, it must be the implementation details, it can't be that the menu is a bad idea!
Can you point to some examples where you think it's being done well?
In principle I agree that multi-level menus are awkward on the web, but showing all the links at once is something I think I only really see in a tiny font at the bottom of the page, which is in addition to a menu at the top.
How does it not look great on mobile? It simplifies the number of options and simplifies the navigation accounting for the fact that mobile devices would require lots of scrolling on a tiny screen to see as much as you could on the desktop. On the desktop it uses all the screen space to show you more detailed sections you can click right to if you know what you already want.
My apologies. I forgot to whitelist the site for JS, and when I viewed it, almost the entirety of the page was taken up by the categories sidebar[0].
With JS it looks much, much better, and navigation is definitely usable. Though at this point it's raises the question of what is navigation: are all those item categories navigational aids, on par with other nav items? Or are they a product index and separate from navigation items? In regards to the GP's suggestion of "showing all links at once", I think it's fair to say that links that only go on some pages but not others don't count towards the "overpopulated navbar", which is usually intended to hold navigation aids that are available on all pages.
So while I think the site in question does a good job of navigation, I think it does so not by choosing a flat design with all links available in the nav, but by cleanly keeping the navigation to just a few key elements ("Contact Us", "Order", "Activity", "Log in") and deferring all other links to separate UI elements that exist only on the relevant pages.
Also a delight that I click on uBlock origin and there is only one domain being contacted :) very rare nowadays from the web that a site doesn't want to pull and include shit from 30 different websites.
As someone whose job entails buying a lot and very frequently from McMaster-Carr, their website is a godsend.
I need a tube fitting in stainless steel? Here’s a MASSIVE list of all of them for every single size imagine that’s easily Ctrl+F’d. Click on the item, enter a qty, add to cart, keep going.
When you have about 200 line items to fill each morning across multiple POs, racing the clock to secure that same-day delivery, modern UI design paradigms are a massive waste of time.
McMaster-Carr is designed with purchasing teams in mind, and the people who work in such teams are (by training or experience) oriented towards certain optimizations that to the casual user may seem overwhelming to parse or ugly.
The day McMaster goes “modern UX” is the day I lose hope.
Edit: forgot to add that in many cases, purchasing on McMaster is done via CSV imports on their order page. Literally do not have to interact with the catalog if I want to. Which is also a godsend.
That is hideously bad design on mobile. Not only do you have to zoom in and move around while zoomed in to find items it also breaks down so the right part moves more than the left. Yes it is good on desktop but on mobile I'd click on to a competitor ASAP.
Let's say you sell a handful of products in a few categories. I'd rather click on the category and then the product, as opposed to the product being directly accessible behind a dropdown of a category.
I'm not fond of big nested menus in general either, but they are good for quick exploration and can be pretty forgiving of poor categorization.
I do wonder if sometimes the nested nav is too in-between. Maybe the solution is not to try to squeeze it all into that structure but make "finding the page I want" to be a more top-level experience. EG don't take me to a Category Page, but do let me select a category and start drilling down, whilst keeping it easy to switch between top level categories.
On desktop screens, I agree, but how could this work on mobile? On a mobile viewport, presumably the navigation links collapse ino a menu. The only other mobile option I can see is to place all site links in the footer which feels clunky.
This sounds great when you are also in control over the number of links on the homepage. This is often not the case. When Big Players demand links (and even redundant links), well, you're gonna end up with more than you wanted.
Just show all the links at once! With appropriate headers and visual hierarchy to provide organization, this is better in pretty much every way: faster to use, easier to implement, and more accessible.
The biggest practical objection I see to this kind of "flat" menu is simply that it's hard to make it look good at the top of a page. But any competent visual designer should be able to manage that, aesthetically.