As the percentage web browsing done on mobile devices continues to skyrocket, we as designers have needed to rethink many layout issues in our websites. Extensive navigation menus are essential for visitors to find their way to your content, but can quickly become a frustration.

Screen real estate is at a premium as the device gets smaller, and user interaction is completely different on a handheld device (tapping and swiping vs clicking and hovering), than on its desktop counterpart. The old tried and true static menu with dropdown child items is great for a  browser on a large screen, but can be a nightmare to scale down.

So what’s the best navigation option for mobile? It really depends on the website. Below we’ll analyze a few popular types of mobile navigation, their pros and cons, and their most useful applications.

Select or Dropdown menu

szeliu.com
Szeliu Mobile Navigation Menu

As the name implies, this method simply replaces the navigation menu with a styled (or often unstyled) dropdown menu. This is typically a standard HTML select menu.

Pros

Plain ol’ HTML. Requires no javascript, just basic HTML.

Easy. Everyone knows what to do with a dropdown, right?

Cons

Not very flexible. You can really only include one level of navigation here. Standard select menus don’t have a way to add a child menu.

Difficult to style. In my opinion, these are ugly. Often it’s difficult to style form elements to be cohesive with the rest of the site design, especially across different browsers.

Application

This is a quick and dirty solution. I’d only recommend use if you’re great at styling forms and can make it look sexy, or you just don’t mind an amateur-looking menu.

Off-Canvas Navigation

target.com
Target Mobile Navigation Menu

This is a favorite of mine. Swiping the page to the side with your thumb (or tapping the familiar little hamburger icon) pushes the page content aside to reveal a vertical menu. While this is a natural interface element for mobile sites, I’ve seen it used on desktop-sized websites as well.

Pros

More than a menu. Many sites include a search bar or some other calls to action in this revealed area.

Space saver. Just an icon is visible most of the time, so the focus can be on your branding and content.

Cons

Requires Javascript. This isn’t a super huge problem anymore, but if you’re a fiend for CSS-only solutions (and browser support), maybe you should try something else, like a dropdown list or a menu in the footer.

Unfamiliar (to some).  If your target demographic isn’t real comfortable interacting with mobile apps (you know who you are), they may not recognize a menu icon, or know what to do with it. Same goes for any style that uses an icon. A way around it is to write out “menu” in the link, but that’s not very clean, is it?

Application

I tend to use this method in most of my responsive websites, when I want to add a bit of interactivity, or have a menu with multiple levels. Lots of web and native mobile apps have adopted this method as well.

Dashboard Navigation

southwest.com
Southwest Mobile Navigation Menu

Go here, here, or here. That’s it. Some mobile sites will strip away the whole home page, or most of the content, leaving just the navigation. Often there is a less prominent menu with the rest of the pages, but the primary path is pretty clear.

Pros

Highlight targeted content. If your site has a few primary content areas that you want to target, or specific tasks you want a user to accomplish, it’s nice to limit their options.

Clear direction. This limits the number of decisions a user has to make when entering the site.

Cons

Interior navigation. This is nice for a home page, but how does a user navigate once they’re inside? There has to be a backup navigation for interior pages. Southwest handles this with second dropdown navigation menu that offers a complete set of options.

Not a responsive solution. Usually this requires creating a separate mobile site from the desktop site, since the primary content changes for a mobile homepage. If your intent is to create a fully responsive design, this won’t fit the bill.

Application

Again, this is most useful for a site that has a clear path you want the user to travel, or if there are very common tasks that are performed primarily on mobile devices.

Footer list navigation

smashingmagazine.com
Smashing MObile Navigation Menu

I rarely see this method in practice, but wanted to include it as it’s an interesting solution. Click on a menu icon at the top of the page, and you’re transported, either by smooth-sliding or a jump, down to the menu in the footer.

Pros

Easy to implement. All you need to do is add an anchor link at the top of the page that slides you down to the menu. Or don’t, and let the user find it.

Simplicity in code. Just HTML, that’s it.

Out of the way. No worries about the navigation taking over your content real estate.

Cons

Where am I? Especially if you don’t see the content sliding down, it’s easy to lose the sense of where you are on the page if you decide not to click on one of the menu items.

User may never find it. With especially long pages, the user may never make it down to the menu.

Application

A good implementation may be on a site that’s light on content and doesn’t require the user to scroll a long way to get to the bottom. Another use might be for a complex menu that requires specific styling. These can be difficult to show and hide efficiently, whereas marking it up within the main page structure is pretty straightforward.

So what’s the best mobile navigation option?

These are just a few of the prominent navigation UI styles out there for mobile. Of course, any decision regarding navigation should be made  with the site’s specific content in mind, so there’s no cut and dry “right” way to do it; the best mobile navigation option is the one that works best for your users and gets them to your content.

When you make your decision, consider the complexity of your menu and its context within the page, how savvy your user base is, and how the interaction will fit in with the overall layout and behavior of your site.

Did I miss anything? If you have another method you’ve seen or like to use, let us know in the comments.