Slide Navigation View Controller

Building an app with slide navigation to reveal a hidden view/menu beneath the main view, like one seen in Facebook and Piggie (picture of the left) ?

Well, that is exactly the purpose of the slide navigation view controller discussed in this post.

Why a view hidden beneath the main view?

I think there are at least 2 reasons for this design.

  • Reserve valuable screen real estate, this is true especially for the iPhone. With very limited space available, you want to keep only the important things front and center.
  • Cleaner/Uncluttered look and feel. For the sample apps mentioned above, It will easily clutter the screen when the ‘hidden’ view that contains menus/buttons are constantly shown.


This component is designed to be simple and easy to use. You call initWithRootViewController: method to initialize with a root UIViewController object. The root view controller is the main view of your application.

Subsequently, you can call slideForViewController:direction:portraitOrientationDistance:landscapeOrientationDistance: to reveal the secondary hidden view. The same method is used to slide the main view back.

This method takes 4 parameters:

  •  viewController, this is the view controller that manages the secondary hidden view. If you call this method to slide the main view back, you can supply nil value for the view controller.
  • direction, i.e. MWFSlideDirectionUp, MWFSlideDirectionLeft, MWFSlideDirectionDown, MWFSlideDirectionRight. To slide main view back, use MFWSlideDirectionNone.
  • portraitOrientationDistance, the slide distance in pixels when in portrait orientation.
  • landscapeOrientationDistance, the slide distance in pixels when in landscape orientation.

For custom/application specific behavior on the event when the sliding will/did occur, your can implement the MWFSlideNavigationViewControllerDelegate protocol. Example usage of the protocol is demonstrated in the Demo app, to show overlay view with tap gesture recognizer on the main view. When the overlay view is tapped, it slides the main view back to conceal the secondary view.

Additionally, there is a category included to provide convenient access to the slide navigation view controller to your view controller. Just like the built-in navigationController property in UIViewController.

How to use in your project

Download/fork the source code from Github, then add the MWFSlideNavigationController .h and .m files into your project.


  • iOS 5 and above only
  • Full ARC

Source Codes and Documentation

The source codes are hosted at github.
You can refer to the documentation here.


This is free and open source component covered under the MIT license. You are free to use and modify the source as long as you retain the copyrights and include permission notice in all copies/substantial portions of your software.

For attribution free license, you can contact me at

Hope this component helps in your project. You can consider paypal donation to if you like what you see.


Updates: new post describing changes introduced in version 0.2

  1. Jens said:

    This is great! How would you do this using storyboard? When I try, the code overwrites the subviews placed inside in the storyboard. Any help is appreciated!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: