iOS Navigation Item

Adding Navigation Item

Before adding iOS navigation items in your view controller, ensure that you already have added a navigation bar in your application because that's where the navigation items will go. We will learn to add iOS navigation items using two ways, first by using a storyboard and second by writing code on the contentView page. So, let's get going.

Using Storyboard

Adding an iOS navigation item to a navigation bar is just a drag-and-drop. We have to drag the bar button item from the object library to the navigation bar, and it will be added. And then we can customize it as required. The steps to add it to the navigation bar are shown in the image below.

Now, let's try adding iOS navigation items using some code.

Using Code

We will build an example application where we will have one left item, one title, and multiple right items. For this, we are first going to create a navigation bar to add our navigation items to it. 

Create an instance of the UINavigationBar class for the navigation bar and give it a background color.

After this, create an instance of UINavigationItem to add multiple navigation items to our navigation bar. And finally, create multiple instances of UIBarButtonItem class for every navigation item to be added to the navigation bar.

We can follow this syntax to add a single navigation item to the left side.

navigationItem.leftBarButtonItem = leftItem

Where navigationItem is an instance of UINavigationItem and leftItem is an instance of UIBarButtonItem.

What if we have to add multiple items on the right side of the navigation bar? For that, we can follow the below-given syntax.

navigationItem.leftBarButtonItems = [leftItem1 , leftItem2]

Here, we are adding an array of bar button items instead of a single bar button item. We can do the same to add bar button items on the right side, as shown below.

// For single item
navigationItem.rightBarButtonItem = rightItem

// For multiple items
navigationItem.rightBarButtonItems = [rightItem1 , rightItem2]

The complete code for our application is given below, along with the output snapshot.

import UIKit
 
class ViewController: UIViewController {
 
   override func viewWillLayoutSubviews() {
       let navigationBar: UINavigationBar = UINavigationBar(
           frame: CGRect(
               x: 0,
               y: 35,
               width: self.view.frame.width,
               height: 50
           )
       )
       navigationBar.barTintColor = UIColor.yellow
       self.view.addSubview(navigationBar);
       
       let navigationItem = UINavigationItem(title: "Notes")
       let rightItem1 = UIBarButtonItem(
           barButtonSystemItem: UIBarButtonItem.SystemItem.add,
           target: self,
           action: #selector(codingNinja)
       )
       let rightItem2 = UIBarButtonItem(
           barButtonSystemItem: UIBarButtonItem.SystemItem.trash,
           target: self,
           action: #selector(codingNinja)
       )
       let leftItem = UIBarButtonItem(
           barButtonSystemItem: UIBarButtonItem.SystemItem.edit,
           target: self,
           action: #selector(codingNinja)
       )
       rightItem1.tintColor = UIColor.black
       rightItem2.tintColor = UIColor.black
       leftItem.tintColor = UIColor.black
       
       // Adding navigation items in the navigation bar
       navigationItem.leftBarButtonItem = leftItem
       navigationItem.rightBarButtonItems = [rightItem1 , rightItem2]
       navigationBar.setItems([navigationItem], animated: false)
   }
   override func viewDidLoad() {
       super.viewDidLoad()
   }
 
   @objc func codingNinja() {}
}

Output

The output of the above code is shown below.

Now that we have learned how to add iOS navigation items in our navigation bar let's try to customize them.

Customizing Navigation Item

Similar to adding navigation items to a nav bar, customizing them can be done in two ways. And we are going to discuss both methods as before.

Using Storyboard

Customizing navigation items using a storyboard is easy. You have to click on the navigation item you want to customize, and a tab will appear on the right side of the screen in XCode, which contains several options to customize the selected navigation item. A snapshot of the properties which are available to play with is given below in the picture.

Note how the appearance of the navigation item that we added before has changed. Here we have changed the image and tint of the navigation item, which gives it a look.

Using Code

There are several properties that you can alter to add or delete some items or add some items onto the navigation bar. Below are some important properties that will be handy in your iOS development journey.

Apart from the properties mentioned above, you can refer to the official documentation of apple here for more ways to customize your navigation items.

Frequently Asked Questions

What are navigation items?

Navigation Items are displayed in the navigation bar, which interacts with the user to enable navigation in the hierarchy of views in the application.

What is a navigation bar?

Navigation Bar is the bar that appears on the top of your screen and contains typical buttons, which are then used to navigate in the hierarchy of screens.

How to hide the back button on the navigation bar?

You can do this by using the hidesBackButton property.

How to display large titles on the navigation bar?

You can set the largeTitleDisplayMode to true to display large titles on the navigation bar.

How to hide the search bar on scrolling?

You can use the hidesSearchBarWhenScrolling property to hide the search on the scroll event by the user.

Conclusion

This article taught us about navigation items in iOS and how we add them to our application. We also looked into changing its appearance using storyboard and swift. If this was your first article about learning iOS development and you needed help understanding some things, don't worry. You can refer to this article to help you create your first iOS app.

We hope this blog has helped you enhance your iOS app knowledge. Here is a list of articles that can help you learn more about ios development.

• iOS App Development
• Learn iOS Development
• iOS UI Controls and Views
• iOS Advance Topics
• iOS Tab Bar Item
• iOS Tab Bar
• iOS UIView

Refers to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Learning Ninja! 🥷