Do not always fear the nav bar on narrow screens

by / Filed under Web

You should display your whole navigation menu on narrow screens if possible. While hamburger toggle buttons and their ilk solve a problem neatly, the best navigation menu is visible by default.

When we design websites for small screens navigation can cause a problem. If we use a long, vertical list of navigation links we risk them taking up most or even all of the screen. If we go horizontal, the menu can extend beyond its right edge. For example, this is what The Telegraph’s screen looks like if you narrow your browser window:

Screenshot of The Telegraph's website

The Telegraph's navigation menu extends beyond the right edge of a narrow screen

There are lots of ways to tackle this problem. The most common is to toggle the navigation list by pressing a button – you’ve probably seen some variation of this hundreds of times:

Screenshot of the Infolink website

Infolink's navigation menu disappears when you view the site on a narrow screen. You can click the ‘hamburger’ icon to see the full menu.

I’m not interested here in the rights and wrongs of hamburger menus. But I think it is worth remembering two things about website navigation on narrow screens.

Firstly, we’d rather not use hamburger icons at all. The simplest, most accessible navigation menu is… a list of links. I’ve spoken to several Suffolk Libraries website users who simply have no idea what pressing the icon does, or that it’s even some sort of toggle button. Although it’s inventive and reasonably whizzy, the hamburger and its ilk create a tension between competing user problems: the awkwardness of scrolling horizontally and the findability of the navigation menu.

Secondly, screen real estate is valuable on a mobile but visible navigation menus make a site more usable. Again, there’s a tension between making content difficult to reach by displaying a long navigation menu on a narrow screen and hiding it behind a button click.

I’d suggest we err a little too much toward hiding the navigation menu. If your navigation menu consists of 6 or more links then you probably need to use a hamburger or something, but there are ways to display shorter menus on a narrow screen.

At the time of writing, I’m not hiding my navigation menu behind a toggle button on narrow screens. Instead, I’m displaying all four links in rows of two:

Screenshot of my website's navigation menu on a narrow screen

On my website you can see the whole navigation menu on a narrow screen

On a widescreen you get a traditional horizontal menu:

Screenshot of my website's navigation menu on a narrow screen

A traditional horizontal menu

Most blog navigation menus consist of a handful of links which could comfortably fit on a narrow screen. Yet you see a surprising number of hamburger menus in the blog world – perhaps bloggers could experiment with visible menus a little more.