navigationBar
border removal
interface design
mobile development
UI customization

How to remove border of the navigationBar?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

On iOS, the "border" under a navigation bar is usually its shadow line, not a normal border property. Removing it depends on which appearance API you are using: the modern UINavigationBarAppearance API on iOS 13 and later, or the older shadowImage and background-image tricks on earlier versions.

The most reliable fix in modern apps is to set the navigation bar appearance explicitly and clear the shadow color. If you only remove one appearance state and forget the others, the line often comes back when the scroll state changes.

Remove the Bottom Line with UINavigationBarAppearance

For iOS 13 and later, configure a navigation bar appearance and set shadowColor to .clear:

swift
1import UIKit
2
3final class HomeViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6
7        let appearance = UINavigationBarAppearance()
8        appearance.configureWithOpaqueBackground()
9        appearance.backgroundColor = .systemBackground
10        appearance.shadowColor = .clear
11
12        navigationController?.navigationBar.standardAppearance = appearance
13        navigationController?.navigationBar.scrollEdgeAppearance = appearance
14        navigationController?.navigationBar.compactAppearance = appearance
15    }
16}

That removes the hairline for normal, scroll-edge, and compact states. Using all three assignments matters because the bar can switch appearance depending on large titles, scrolling, and size class.

If you want a transparent bar instead of an opaque one, start with:

swift
appearance.configureWithTransparentBackground()
appearance.shadowColor = .clear

Older Approach for Legacy iOS Code

Before UINavigationBarAppearance, developers commonly removed the line like this:

swift
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()

That still appears in older codebases, but in modern iOS projects the appearance API is the cleaner and more complete solution.

Global Versus Per-Screen Styling

If every screen should remove the border, you can apply the appearance through the appearance proxy:

swift
1let appearance = UINavigationBarAppearance()
2appearance.configureWithOpaqueBackground()
3appearance.backgroundColor = .white
4appearance.shadowColor = .clear
5
6UINavigationBar.appearance().standardAppearance = appearance
7UINavigationBar.appearance().scrollEdgeAppearance = appearance
8UINavigationBar.appearance().compactAppearance = appearance

If only one screen needs the border removed, configure the specific navigation controller or update the appearance in that screen's lifecycle methods.

One practical detail is timing. If a controller later replaces the navigation bar appearance in viewWillAppear, it can undo your earlier border removal. When styles seem inconsistent across screens, look for multiple places that assign navigation bar appearance rather than assuming the original code failed.

Why the Border Sometimes Comes Back

A frequent source of confusion is that the line disappears on one screen and reappears while scrolling. That usually happens because:

  • 'standardAppearance was set, but scrollEdgeAppearance was not'
  • a different controller later overwrote the appearance
  • the app mixes legacy shadowImage code with the newer appearance API

This is why a complete appearance configuration is more reliable than one-off tweaks.

Common Pitfalls

  • Clearing only standardAppearance and forgetting scrollEdgeAppearance.
  • Mixing shadowImage hacks with UINavigationBarAppearance in the same code path.
  • Applying a global appearance when the design requirement was screen-specific.
  • Forgetting that large-title navigation bars often use the scroll-edge appearance.
  • Debugging "border" styling as if it were a CSS-like border when it is really the navigation bar shadow line.
  • Updating one controller's bar appearance and expecting it to survive a later navigation-controller-wide override.

Summary

  • The visible line under a navigation bar is usually its shadow, not a normal border.
  • On modern iOS, remove it by setting shadowColor = .clear on a UINavigationBarAppearance.
  • Configure standardAppearance, scrollEdgeAppearance, and compactAppearance together.
  • Older codebases may use shadowImage and empty background images, but the appearance API is preferred now.
  • If the line comes back while scrolling, check which navigation bar appearance state is active.
  • Test transitions carefully.

Course illustration
Course illustration

All Rights Reserved.