Share this Pod!


Share this Pod!


The BBSlideoutMenu was designed to make it extremely simple to have beautiful menus that could be customized for every project. The goal was to create a one-size-fits-all solution to slide out menus while avoiding the complexity of segue based solutions.

  • Connector.Connector.


    A clean, professional look that doesn’t get in the way. With enough customization to fit any project

  • Connector.Connector.


    Simple to implement with a single line of code. Oh, and no pesky segues either.

  • Connector.Connector.


    Smooth and snappy animation to keep up with your users

Xcode 7 required!


BBSlideoutMenu is available through CocoaPods, to install simply add the following line to your Podfile.
Don’t have CocoaPods installed? Click here

If you don’t use CocoaPods you can download the project using the link on the right. Import the BBSlideoutMenu.swift class found at /BBSlideoutMenu-master/Pod/Classes

Get the Source Code

Includes the sample project!


They are Videos!
Tap to play!

BBSlideoutMenu leverages the scene dock to make it easy to get up and running without the need for a lot of setup. This is a new feature in Xcode 7 and quite a good one at that.

Drag a UIView to the SceneDock
Simply drag a new UIView into the Scene Dock of the view controller you want the menu to show up in.

Need to use the same menu in multiple places?
You can create your menu view as a xib instead!

Simply change the custom class of the new UIView to BBSlideoutMenu. This will do all the heavy lifting for you, and all you had to do was type in the name!

Change the UIView class to BBSlideoutMenu

A pretty simple, but important, step

Code time!

Import the class; Connect the UIView

Import the BBSlideoutMenu class and connect an outlet for the UIView to your view controller. In this example my view controller is call MyViewController.

Here’s the hard part so I hope you are paying attention! To setup the slideout menu you have to call the view’s function setupEdgePan. And… that’s pretty much it.

Call setupEdgePan()
Crash Alert!
Be sure to call setupEdgePan() in, or after, viewDidAppear!

See it in action

Run the project and swipe left starting from the right edge of the screen. I changed the background color of the slide out menu so we can see what’s happening. For the small amount of work we did we have a pretty solid effect. This is the out-of-the-box configuration but it doesn’t stop there. Next we will explore adding your own content to the menu and the ways you can customize it.


The Next Steps

Adding Functionality

Because the view lives in MyViewController’s Scene Dock, you can connect any outlets directly to MyViewController

Add an element
Connect IBAction / Outlet
Write code

More coming soon




Controls the direction of the edge swipe gesture. Defaults to .Left.

Currently, changing this property after calling setupEdgePan() requires another call of setupEdgePan(). Will be fixed in next version.

Direction Enum:

A percentage ( 0 – 1 ) representing how far the menu should slide. 1 being the entire screen width and 0 resulting in no moment.
Minimum 0.1
How much the starting view shrinks when opening the slide out menu. Measured in pixels this value determines both the top and bottom pixel margin. Default is 60
Used in the animation, this value in pixels determines how far offset from it’s destination the menu starts. Default is 150
Amount in seconds. When the menu it opened via a button, this value is used to determine the time it will take to complete the animation.
Used in animation. This percentage ( 0 – 1 ) is the scaling offset the menu starts at when animating. 1 results in no scaling effect. Default is 0.8
A Bool to determine if the menu has any spring physics when changing position. Default is true.
The damping value for the spring animation. Effectively the stiffness of the spring. ( 0 – 1 ) 1 being a solid spring with no bounce. Default is 0.5
Default value is NULL. When set the slide out menu will automatically use this image as a stationary background when open. To remove just set back to NULL.


Sets up a EdgePan gesture to open the Slide Menu. Can only be invoked after the initial view controllers viewDidLoad function is called.

A manual call to present the slide out menu

animate: A Bool that specifies whether to animate the transition
didPresentMenu: Calls when the animation is completed, Pass nil to ignore callback

Manually dismiss the slide menu

animated: A Bool that specifies whether to animate the transition
time: Time in seconds the animation will take. Pass nil to use default value setup in storyboard

Leave a Reply

Your email address will not be published. Required fields are marked *