An alternative to select elements as navigation in narrow viewports
A recurring problem when making sites fit in a narrow viewport is navigation. The most common approach on larger screens is to use a horizontal navigation for the top level items. Sometimes such menus are complicated/complemented by drop-downs listing sub-items, but I’ll leave that out of this post and focus on how to handle just the horizontal navigation bar.
Now, you could simply let the menu items wrap as they need to on small screens. In some cases that is a completely acceptable option, but often that can make the menu take up too much vertical space. One common design pattern (there are more, as evidenced by Brad Frost in Responsive Navigation Patterns) for avoiding that is to convert the navigation items into a select element on small screens. While doing so does save space and may initially feel like a smooth solution, there are a number of drawbacks, some of which Andy Clarke mentions in The select menu navigation pattern. I think there are better options.
I’ve always felt that using select elements for navigation is a bad idea, be it on the desktop, mobile, wide screens, or narrow screens. Form elements are simply not meant for navigation.
But what is it about select elements that people want? The compactness. But do we really need to brutally turn a list of links into a select menu in the DOM to achieve that? Nope. Provided that you don’t want a navigation that really looks and acts exactly like a select element, a simpler option is to keep the links, restyle them a bit, hide all of them except the active one, and add a button to toggle the visibility of the rest of the links.
This approach is pretty much what Maggie Costello Wachs describes in A Responsive Design Approach for Navigation, Part 1. Since I’ve been using a similar, but slightly different, approach I thought I’d post a demo and describe how it works to give people yet another option.
The goal: let the user toggle the menu options
All we need to do is set the links in the menu to display:block so they’ll be stacked on top of each other. This is also the way the menu will look if JavaScript is unavailable. Next, we hide all links except the selected one and add a button to toggle the visibility of the rest of the links. You can see this concept in action on the Narrow navigation menu demo page (make the browser window narrow and reload the page).
When you look at the menu visually, it’s quite obvious what the button does. However if you’re listening to the page instead, it may not be so obvious. To help with that the button contains a bit of visually hidden text that tells screen reader users user what the button will do – hide or show the menu. This text changes as the menu is opened and closed.
The code
You can view source on the Narrow navigation menu demo page to see the CSS used. The JavaScript can be found in jquery.narrow-nav-menu.js. There really is nothing complicated going on so both are pretty straightforward and have plenty of comments that explain what’s going on.
In real-world situations you will likely want to load and unload the script dynamically as window size or orientation changes, either based on an estimated breakpoint width or by calculating if the menu items will fit horizontally and only run the script when they do not. How to do that is beyond the scope of this article.
An alternative to options
Since there are many factors involved when you decide exactly how to handle your menus, this technique may not always be the best option. But I do think it’s one worth considering before choosing to convert a list of links into a select element.
There are probably ways to improve this technique. Suggestions are welcome, either by email or on Twitter.