Slide-out Navigation


Mobile software is evolving at a wonderfully fast pace. In fact, it's odd to think that the iPhone didn't exist until June 2007. The first Android-powered phone came even later: October 2008. In a field this new, it's normal to see a rapid evolution in the user interface. Most of these changes are driven by the companies backing the phones. There are, however some exceptions, and one of those exceptions is the "slide-out navigation" model.

The first popular implementation of this approach came from Facebook. ( They originally called it left-hand navigation, but as things evolved, people like Ken Yarmosh started calling it by it's current name. In a 2012 article, Ken Yarmosh outlined the basic design pattern. (You can read it here:

The following graphic comes from that article; it demonstrates how slide-out navigation works:

Characteristics of a slide out menu:

  • Generally in the upper left
  • The menu icon is usually three horizontal lines
  • When the menu icon is clicked, the content and the menu icon slide to the right (animated)
  • The original content is partially visible, but the user can't interact with it
  • Clicking on the menu button or the original content will cause the menu to retract
  • Clicking a menu item causes the menu to disappear and the content to be replaced with the screen that corresponds to the menu selection.

This new method of navigation is a wonderful development; previously, all navigation was hierarchal, and it could take several clicks / touches to get from one place in an application to another. Slide-out navigation allows for quick jumps to precisely the right spot within the app.

Since this approach is so new, there's not a built-in iOS control to handle this. (Android has such a construct through the v4 support library, so I'll use it when it's time for the Android implementation.) However, for iOS, I'll need to "roll my own".

One more point: My original "home" screen assumed that all navigation would be hierarchal. Now that I'm implementing a slide-out navigation design pattern, it will be necessary to redesign the approach. (I'll save that for a future article.)

Before You Begin - Open Source

There are a number of open source projects that implement the slide-out navigation model. I haven't used any of them, because I wanted explore implementing it myself. However, if this was my "day job", I'd strongly consider using open source.

A quick scan of the various developer sites will provide you with links to some of the most popular projects. However, I'd recommend keeping the following in mind: Slide-out navigation is becoming very popular, so it wouldn't surprise me if Apple developed a native set of widgets to handle it. If this happens, then it's probably a good idea to move to the native model. So as you evaluate projects, think about how easy (or difficult) it would be to untangle your code from the project.

I'll now describe how to implement slide-out navigation for both iOS and Android applications.