Customizing the navigation bar in iOS

1 min readJul 28, 2019

Sometimes standard iOS navigation bar looks pretty plain. Luckily, customization is available. This article will demonstrate how to customize navigation bar appearance, while still maintaining all the functionality provided in Navigation Controller.

Setting background color

navigationController?.navigationBar.backgroundColor = .white
navigationController?.navigationBar.isTranslucent = false

backgroundColor property will set the color of the view, but if you wish to set the color for the complete background which covers the status bar as well then use barTintColor property

Setting background image

navigationController?.navigationBar.setBackgroundImage(UIImage(named: “sw-rebel-48.png”), for: .default)

Setting shadow image

navigationController?.navigationBar.shadowImage = UIImage(named: “sw-empire-48.png”)

Styling navigation bar title

// setting title color
navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red]

there are other attributes which you can style as well, e.g. font, underlineStyle, shadow, underlineColor, obliqueness…

Adding single UIBarButton item

let lockButton = UIButton(type: .system)
lockButton.setImage(UIImage(named: “secure-cloud-50.png”), for: .normal)navigationItem.leftBarButtonItem = UIBarButtonItem(customView: lockButton)

Adding multiple UIBarButtons items

let rebelButton = UIButton(type: .system)
rebelButton.setImage(UIImage(named: “sw-rebel-48.png”)?.withRenderingMode(.alwaysOriginal), for: .normal)let empireButton = UIButton(type: .system)
empireButton.setImage(UIImage(named: “sw-empire-48.png”)?.withRenderingMode(.alwaysOriginal), for: .normal)navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: rebelButton), UIBarButtonItem(customView: empireButton)]

Adding text to UIBarButton

lockButton.setTitle(“secure”, for: .normal)
lockButton.setTitleColor(.black, for: .normal)

this will display black text next to the image.

TL;DR

Jump straight to the source code.