1

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: My header and a subheader bar displaying 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?

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.