Viewed: 4116
Code

Creating a horizontal scrolling responsive menu

It’s something I have been wondering about for a little while now. How to create a responsive navigation, that doesn’t involve the ‘hamburger’ toggle icon. It’s a tricky area, because we aren’t afforded the space that native apps get. So if we follow the principles set by them, it is annoying to use and generally gets in the way.

Although I’m certainly not the first to use this idea, it has been used in early versions of the Facebook app and it’s being used on some pages on the Apple website. It’s a pattern that could be an ideal replacement for the “hamburger” menu.

What we want to avoid when creating this menu

What made the ‘hamburger’ menu so successful was how discrete and easy it was just to shove away. Which in turn is why it’s was deemed unsuccessful, in terms of engagement.

Generally fixed elements

The way that Mobile Safari on iOS works is terrible for anything fixed towards the bottom of the viewport. Centralising it in the viewport to the left or right can obscure content, which in turn will be as annoying. This is something I’m still debating as there are some good examples using bottom navigation for a website.

Anything list like

A list like navigation can get in the way of the page itself. Although it’s highly accessible from the off, I think you can push the more valuable content, you would want the visitor to see initially.

Tap/click to bring you down to a menu

Simply, it is no better than the ‘hamburger’.

So why would a horizontal navigation be any better?

On touch screen devices swiping is much more natural and nicer (especially on iOS), than horizontal scrolling on a computer. You see this pattern used throughout apps and galleries. So why not navigation? The navigation is always visible, although some of the items may not, this is an advantage over hiding the navigation completely.

The implementation

The implementation is flexible to work with your layout. Whether you have it positioned by your logo, it will work. Just apply the styles, to whichever element you prefer.

CSS

The two properties that do the work here are white-space: nowrap and overflow-x: auto. You need to make sure items don’t wrap otherwise, it will behave normally and allowing scrolling using auto means scrolling will be available when necessary.

.scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

It’s important to use the -webkit-overflow-scrolling property. On iOS devices, this makes scroll areas have momentum and ease of use. Android devices by default are easier to scroll, on the few I have tried this on. -ms-overflow-style: -ms-autohiding-scrollbar helps users on IE 10, 11 and Edge have a scrollbar to use on hover. You can hide it completely, however, from what I’m aware that stops scrolling — which is somewhat strange. Not being visible immediately makes the appearance better for Windows users. Unfortunately, I haven’t been able to find a solution that works for Chrome and Firefox on Windows.

HTML

<header class="scroll">
  <a href="http://iamsteve.me">Logo</a>
  <nav>
    <a href="http://iamsteve.me/blog">Blog</a>
    <a href="http://iamsteve.me/portfolio">Portfolio</a>
    <a href="http://iamsteve.me/downloads">Downloads</a>
    <a href="http://iamsteve.me/about">About</a>
    <a href="http://iamsteve.me/contact">Contact</a>
  </nav>
</header>

Depending on which area you want to scroll, you can apply the styles to the header or navigation.

Use cases

See the Pen Horizontal scroll navigation by Steve (@stevemckinney) on CodePen.

Make sure you don’t have a width set on the items

An area that may catch you out with this approach is applying a percentage width to the items. If you need to make sure something always has a percentage width, try using min-width instead. Using a percentage width always will be a percentage of the visible area rather than what overflows.

The downsides

It’s quite a simple solution in reality, although with every solution there are downsides, I’ve listed the ones I can think of below. I’ve not seen any sources testing a navigation like this, which is why I’m listing areas for concern.

Needs affordance

The affordance isn’t a massive problem. As many things require affordances. I always aim to have an item in the navigation cut off partially. Other alternatives include adding a shadow or fading the items out.

Not quite ideal if a user browses with a narrow window on Windows

Horizontal scrolling isn’t the greatest on a desktop computer, although it’s the worst on Windows. The only sane method for hiding scrollbars exists for IE11 and Edge, if you want to have it behave similarly to OS X. If this is a problem for you, there is a solution.

Flickity

Something I want to look at will be implementing this with Flickity. I like Flickity due to the vanilla Javascript implementation. Using this method would mean that scrollbars are hidden. Usability will be increased across all kinds of devices, due to the various ways you can interact with it.

Edit: I have since wrote a post that covers enhancing horizontal scrolling with flickity

What do you think?

This is a reasonable way of displaying navigation on the basis of what you have to compete with across devices. Have you used anything like this in recent projects? I’d like to hear on twitter. You may also be interested in an alternative approach with flexbox.

Next to read

Multiple level horizontal scrolling navigation