User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Working on a website which will have blog posts and those posts will have categories. Those categories will have subcategories. So 2 level of categories which potentially adds up to well over hundreds.
See screenshot from my header, displaying so far only the top level categories:
I realise this subheader idea won't work because of responsivity problems. What is the ideal way of showing a bunch of different categories, which would work both for desktop and mobile?
When looking at your navbar I'm reminded of a horizontal scrolling navbar.
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
I can't really find the article it is referenced in, but it was an article about alternatives to an off-canvas/drawer/hamburger menu.
The article mentioned a big American news outlet using the navigation on their site, but I don't remember which site is was.
They put the most important links at the front and the least important at the back.
It might result in a very long, scrollable bar.
Personally, I think a better solution might be a mega dropdown.
https://codyhouse.co/demo/mega-dropdown/index.html#0
This example is responsive and can hold a lot of links over multiple levels.
I also would like to comment on the sheer number of links on the same level. I recommend reducing the number of categories per level. You might have to create more levels, but it will help with discoverability. I base this on Hick's law, Miller's law and the Jam Study.
