Mobile
Article

5 Examples of Patterns for Mobile Navigation Menus

By Annarita Tranfici

In my last article, Obvious always wins I showed how important it is that users are able to understand your website or application and can use it without any effort. The first thing to be sure of is that your interface is simple and intuitive, utilizing familiar icons, actions, and features.

One of the greatest challenges for developers is to find and implement a functional navigation menu that works well on mobile devices.

You cannot create a good user experience without a functional navigation bar. New users will look for and scan your navigation so it is crucial to give a good impression and avoid disappointing their expectations.

Among the professionals who have written on this topic, the first that deserves a mention is Brad Frost. You can discover his approaches and examples of patterns for mobile navigational menus on Brad’s website.

In this article I’ll focus on 5 of them. Think carefully about the best to use in your next projects based on your users’ needs.

Top Nav or “Do Nothing” Approach

One of the most frequently used solutions for navigation is to keep it at the top. Because of its ease of implementation, it’s the one adopted by the majority of websites.

Left Logic, for example, uses this approach.

The image represents the screenshot of Left Logic homepage

Positives

One of this method’s greatest advantages is that you don’t need to depend on Javascript, or play tricks with HTML lists. It flows naturally.

Negatives

Unfortunately, this method has some disadvantages. Firstly, height issues. This will become an even bigger problem on smaller screens since your screen real estate becomes scarcer.

Generally, websites adapt to the width of a mobile device, but not for the height, and we all know how important height is on mobiles. Imagine you are visiting a website on your smartphone and the height of the company logo and the first two items of the menu fills all your screen. You have to repeatedly scroll until you finally see the content you’re looking for.

We all know that the sooner people find what they are looking for, the better. It is what everyone involved with a website wants, especially its users. This means letting users focus on the core information on a page, avoiding the possibility of confusion with other page elements.

Secondly, the “Do Nothing” approach is not scalable and you could face several issues if you want to add new links. You need to be careful to not place links too close together, since this choice can result in unwanted clicks.

Finally, you could encounter cross-device issues. Devices have different methods of rendering fonts and websites can look great on an iPhone but not so great on other platforms.

Select menu

The ‘Select menu’ is a simple and common menu approach. Select menus are accessible in every browser, easy to implement, and familiar to everyone. Their simplicity is their main drawback. Select menus are generic looking, and might not fit with the feel of your site.

The image represents the screenshot of Retreats 4 Geeks homepage

Positives

This method frees up plenty of space and keeps interactions in the header where users are accustomed to finding web navigation.

They are easily recognizable through a clear label such as “navigation” or “menu” and pull up native controls, with each mobile browser handling select menus their own way.

Negatives

With select menus you lack design and styling control. Each browser handles them in their own, usually clunky, manner.

They are potentially confusing, especially when handling nested lists, that can look strange. Child elements are typically handled by indenting with dashes, and while this method might get the point across, and Brad Frost also sees it as confusing and ugly.

The other disadvantage is that select menus rely on Javascript. It is needed to rewrite the page markup and transform an unordered list into a select list. The method doesn’t require much code to convert the list to a select menu, but should be noted.

Toggle

With the toggle approach, a menu slides open in the header. It’s a good-looking approach, scalable and user-friendly. This pattern is not difficult to implement and allows you to keep your whole menu and for users to easily navigate with it.

For its mobile version, the University on Notre Dame has chosen this approach.

The image represents the screenshot of the University's homepage

Positives

The user is presented with an accordion type navigation. The toggle menu appears in place and keeps the users there, without the risk of disorienting them.

It’s simple, elegant, composed of a smooth animated flyout or basic show/hide and is easy to scale. Through the use of CSS, you only have to hide the mobile trigger and show the menu when the appropriate breakpoint is reached. That’s all.

Negatives

This method relies on a small amount of Javascript needed to trigger the toggle, so you could face some minor issues with a few browsers. This method also relies on animations, these can perform poorly on mobile devices and may need to be disabled.

Footer navigation is appealing for the same reasons as top navigation. It’s easy to implement and makes sense for simpler sites. This pattern is pretty self explanatory, navigation is placed in the footer.

It can be applied in two possible methods. The first is including an anchor in the header pointing to the main navigation at the bottom of the page. The second skips the anchor and assumes you’ll figure it out. The second method is more direct and cuts down on endless scrolling.

Smashing Magazine employs the Footer-Anchor approach.

The image represents the screenshot of Smashing Magazines homepage

Some websites get away with just having links in the footer with no menu at the top. Others have implemented a direct jump from a menu button to the footer. The jump to the footer can be a little disorienting and can make the experience worse.

Positives

It’s simple to implement (anchor at the top and menu on the bottom), doesn’t use Javascript and leaves plenty of space for core content.

Negatives

Quickly jumping to the footer of the site can be disorientating and unelegant.

Footer only

This approach is like the footer anchor approach but without the anchor in the header. It follows the content-first, navigation-second model, however it requires mobile users to scroll all the way to the bottom in order to navigate the site.

Positives

It frees up header space.

Negatives

Users find it difficult to discover and access, especially on mobile devices.

There are not so many examples of this approach. To give you an idea, here are the links of the websites discovered by Brad Frost himself:

Conclusion

In this article we’ve looked at 5 common approaches for creating a simple, good-looking and functional menu. Try combining these styles and approaches to create interesting navigational methods and let me know what you discover.

  • evolutionxbox

    No offense, but this article is basically a copy of @brad_frost’s own article from over 2 years ago.
    http://bradfrostweb.com/blog/web/responsive-nav-patterns/

    • Aurelio De Rosa

      Are you trying to say that from Brad’s post on everyone discussing about navigational design patterns is just copying/pasting content? Don’t get me wrong, but what I want to say is that this article discusses a well-know topic. So, it’s clear that you can find a lot of similarities with this or that article already published on the web. For sure Brad’s post is probably the best and more detailed article anyone could write on this topic, but this doesn’t mean that all the others are copying his content. In addition she has also referenced Brad’s article.

      Just to reinforce the concept, my last article was on the time element of HTML5 (http://www.sitepoint.com/html5-time-element-guide/ ) which isn’t very new and for sure you’ll find several articles on this topic with many similarities. This doesn’t mean that I’ve just copied my article.

      • evolutionxbox

        True they are similar. Maybe not a cut and paste, but even the titles of the sections are extremely similar, e.g. “Top Nav or “Do Nothing” Approach”. (http://goo.gl/LEy7FP)
        I apologise for calling a “cut and paste” job. The two articles are just too similar to not think one was copied.

        • Nova

          Wow, yeah they’re extremely similar. Brad Frost’s article is basically rewritten into this.

  • YNWA

    I choose Select lists for mobile websites. For mobile web apps I will put more time into it and make a more stylish menu. Just my opinion.

  • http://www.trivial.ly/ Nic Johnson

    Select boxes for navigation are a terrible idea. Your navigation is now dependent on form submission, which Google will ignore. Only do this if you hate your clients.

    • M S

      What if you have both types and hide/show/move depending on whats needed?

      Or it you generate a Select from the regular nav, by js?

    • Aurelio De Rosa

      Google doesn’t ignore form submission from a long time now.

      • http://www.trivial.ly/ Nic Johnson

        I dont belive Google will submit a form, or it would be going round clicking like buttons and posting blank comments as it spiders.

        • Aurelio De Rosa

          I can understand that you don’t want to believe me, but you can search on the web and see that now it can.

          • http://www.trivial.ly/ Nic Johnson

            Interesting, I’ll check it out.

          • http://www.nicholasjohnson.com/ Nick Johnson

            You are right. Google selectively submits forms. My apologies.

    • prabhat man Shrestha

      Yes i agree with your point. I too hate the select boxes for navigation one.

  • HalfFull

    Back when the select menus for navigation were often called “jump menus”, the main opposition to their use came from accessibility proponents. I think most of those arguments still apply. Most implementations I see don’t use a submit button which is required for full keyboard accessibility. Some browsers like Firefox may change the expected behavior.

    Using Option Groups may be adapted for some use cases that need grouped, rather than nested, items. I don’t know what support is like in mobile agents for Option Group.

  • Aurelio De Rosa

    In regard of the title I think the reason is because these are the names of the patterns, so you’ll always see them around. It’s like discussing other design patterns, you’ll always find “Factory”, “Singleton”, “Template”, and so on.

  • Dis

    Brad Frost website does not seem to be up anymore…

  • Jani Hartikainen

    That little icon for the menu is also called the hamburger, thus it’s sometimes called the hamburger menu :)

    There have been some discussions about that type of menus and how it makes navigation more confusing by not presenting an obvious method of navigating the site. I think it’s probably mostly a problem with users who aren’t used to seeing that icon though.

  • Nathan

    For the toggle option you could always use a hidden checkbox with a label button, then target with the css :checked selector :D

  • http://www.mundohispano.org/ Venom

    These are basic simple menus, unfortunately you chose the most insignificant of them all as examples :(

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Mobile, once a week, for free.