Configuring the backBarButtonItem of a View Controller's Navigation Item in a Storyboard

warrenm picture warrenm · Mar 22, 2012 · Viewed 22k times · Source

It's easy enough to drag and drop bar button items onto a view controller's navigation bar in a storyboard in Interface Builder. In this way, you can set the leftBarButtonItem and rightBarButtonItem outlets of the view controller's navigation item. But there's also a backBarButtonItem outlet, and it's not obvious at all how to set it. How can I set a custom back bar button item using Interface Builder?

Answer

warrenm picture warrenm · Mar 27, 2012
  • Select the view controller whose navigation items you want to change. The black bar displaying the identity of the view controller changes to an iconified tray of its referenced objects.

  • Drag and drop a bar button item from the object library onto the tray.

Storyboard view of a navigation controller and subordinate table view controller

  • Right-click on the view controller's navigation item in the main object tray on the left-hand side. Wire up the newly added button as the navigation item's backBarButtonItem outlet.

Interface Builder screenshot illustrating how to wire up the back bar button outlet

  • Select the bar button and configure it in any way you choose with the Attributes Inspector.

Screenshot of the attributes inspector in Interface Builder showing options for the back bar button item