SwiftUI – How to set the title of a NavigationView to large title (or small)?

Question

Using SwiftUI how do I change the navigation bar's title size? Choosing between a standard or a large title.

Answer 1

SwiftUI (iOS 14+)

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitleDisplayMode(.inline) // ⬅️ Important part
}

SwiftUI (Xcode 11.3)

SwiftUI navigationBarTitle modifier has an optional displayMode property which you can set to .inline for small titles and .large for large titles. See documentation

NavigationView {
    TopLevelView {
        // […]
    }
    .navigationBarTitle("Test", displayMode: .inline) // ⬅️ Important part
}

---

How it's done in UIKit

Since iOS 11, UINavigationBar can display its title in standard and large title mode.

On UIKit, if you want to choose between the two behaviors you have to set the largeTitleDisplayMode property of your ViewController's navigationItem to decide if this particular view controller should display a large title or not.

Then, you need to check the prefersLargeTitle property of your Navigation Controller's navigationBar. Setting it to true will allow the ViewControllers in its navigation stack to display large titles. Conversely, setting it to false will prevent it, overriding the preference of the individual NavigationItems present in the stack.

This will display a large title in UIKit

// Set this property to true to allow NavigationItems to display large titles
let navigationController = UINavigationController()
navigationController.navigationBar.prefersLargeTitles = true

/*
 Choose between `always`, `never` and `automatic` to decide
 if this particular view controller should display a large title.
 */
let viewController = UIViewController()
viewController.navigationItem.largeTitleDisplayMode = .always

Answer 2

For iOS 14 and up

Use the modifier navigationBarTitleDisplayMode(:) on the root view in your navigation stack.

Answer 3

Xcode 14.0+

The most robust approach is to create your own method with default value .large. For that you need a View extension. Keep using the navigationBarTitle() modifiers and along with that use your own ones. If you don't need the default value use .inline instead.

import SwiftUI

extension View {        
    func barTitle(_ title: String,
             size: NavigationBarItem.TitleDisplayMode = .large) -> some View {
        self.navigationBarTitle(title, displayMode: size)
    }
}

struct Benchmark: Identifiable, Hashable {
    let id = UUID()
    var name: String
}

In Xcode 14.0+, there is a new entity called NavigationStack. NavigationStack is a view that displays a root view and enables you to present additional views over the root view.

struct OilView: View {
    
    var benchmarks: [Benchmark] = [ .init(name: "WTI"),   .init(name: "Brent"),
                                    .init(name: "Urals"), .init(name: "OPEC") ]
    var body: some View {
        
        NavigationStack {
            
            List(benchmarks) { benchmark in

                NavigationLink(benchmark.name, value: benchmark)
            }
            .navigationDestination(for: Benchmark.self) { crudeOil in

                if crudeOil.name == "WTI" || crudeOil.name == "Brent" {
                    Text("Light and Sweet")
                        .font(.title2)
                        .barTitle(crudeOil.name)    // default `.large` value
                    
                } else if crudeOil.name == "Urals" || crudeOil.name == "OPEC" {
                    Text("Heavy and Sour")
                        .font(.title2)
                        .barTitle(crudeOil.name, size: .inline)
                }
            }
        }
        .navigationBarTitle("Benchmarks", displayMode: .large)
    }
}