How to make a transparent navigation bar in iOS

A transparent navigation bar is quite popular among the design community. It is just a matter of time before you have to do it. We will explore different ways to do that in this article.

I will group the way to do this into two categories.

1. Globally, where we set app-wide navigation bars transparent.
2. Locally, we set only some instances of navigation bars transparent.

Globally

To customize the appearance of all instances of navigation bars, we modify the bar properties on the appearance proxy of UINavigationBar, UINavigationBar.appearance().

There are two sets of properties that we can set to appearance proxy to achieve a transparent effect based on an iOS version that you supported.

Pre iOS 13

You need to do three things to make a navigation bar transparent.

1. Set background image to non-nil empty image (UIImage()).
2. Set shadow image to non-nil empty image (UIImage()).
3. Set isTranslucent to true.

UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isTranslucent = true

iOS 13 onwards

The process becomes simpler in iOS 13 with a new UINavigationBarAppearance class which is an object that keeps all appearance attributes of a navigation bar.

You only need to make transparent background configuration by call configureWithTransparentBackground() method. It is a convenient method that configures the bar appearance object with a transparent background.

let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()

UINavigationBar.appearance().standardAppearance = appearance

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

Try it for Free

Make an instance of navigation bar transparent

To apply a transparent navigation bar for a specific navigation bar instance, you need to repeat the process we did in the previous step but set it on navigation bar instance instead of UINavigationBar.appearance().

Pre iOS 13

You can either set it when initializing the UINavigationController instance or inside the child view controller.

Set navigation bar appearance when initialize UINavigationController.

let nav = UINavigationController(rootViewController: ViewController())
nav.navigationBar.setBackgroundImage(UIImage(), for: .default)
nav.navigationBar.shadowImage = UIImage()
nav.navigationBar.isTranslucent = true

Set navigation bar appearance inside child view controller.

override func viewDidLoad() {
    super.viewDidLoad()
    
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

Set navigation bar appearance inside a view controller results in the same effect as setting it directly on navigation bar creation. The navigation bar will stay transparent until other view controllers change it.

iOS 13 onwards

We can set it the same way as we did in the Pre iOS 13 method, but we use UINavigationBarAppearance instead this time.

Set navigation bar appearance when initialize UINavigationController.

let nav = UINavigationController(rootViewController: ViewController())
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()

nav.navigationBar.standardAppearance = appearance

Set navigation bar appearance inside child view controller.

override func viewDidLoad() {
    super.viewDidLoad()
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()

    navigationController?.navigationBar.standardAppearance = appearance
}