I’m a product designer working on a web app, and I’ve been running into an issue with the topbar design. The topbar displays a list of clickable items (user-defined names, so the lengths can vary a lot). On large screens, it works perfectly fine, and everything fits. But as soon as there are more items or we’re on a medium or small screen, it overflows and some items become inaccessible.
Here’s the challenge:
- I want to avoid horizontal scrolling because it hides some items and makes navigation clunky.
- I also want to avoid adding extra clicks (like dropdowns or menus) since it would slow users down.
- And ideally, since this concerns the top bar of my application, I'd prefer not to change its height.
On top of that, the right side of the topbar is reserved for fixed buttons, so the space available for the items is limited.
To give you a better idea, here are two screenshots:
- Large screen: everything fits nicely.
- Small screen: the space issue.
I’d love to hear your ideas on how to handle this in a way that’s clean, accessible, and user-friendly.
Thanks so much!
