What are the pros and cons with an overflowing horizontal scrollable nav bar?



  • On the team with designers and coders at my office, we're currently having a discussion about horizontal navigation bars when they overflow on mobile. This is not a discussion about using cards that are scrollable, like in the Netflix app, but rather in a menu/sub menu.

    We took a look at what Google is doing and they fade out other options that are not visible.

    Google horizontal nav bar 1

    But what happens when the screen size is smaller than that?

    Google horizontal nav bar 2

    Suddenly, there's no indication whatsoever that there are more options.

    That's my biggest concern with these types of solutions. Other things I'm worried about are accidental edge swipes and back navigation. Wouldn't a "More" menu be a better solution?

    What are your thoughts? Are people used to this type of navigation? Do they actually use it? What are the options?



  • Although a bit older, this article mentions:

    Our research found that even strong cues such as arrows frequently remain unnoticed. People expect to scroll vertically for additional content, but they don’t expect to scroll sideways. Horizontal scrolling works against their preexisting mental model of a web page.

    If you must, always provide a visual cue. Might be a bit tedious for the google example, but finding a way to always have a label peeking might work.

    A "more" menu or "contextual menu" usually triggers relevant actions for the selected item. Its implementation on a menu may seem unfamiliar to users. It might be interpreted as "actions I can do with the current page", rather than "more menu items".

    Here is a primer for mobile navigation patterns. Each pattern has its deficiencies and the decision depends on minimizing downside for your users.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2