Customizing the navigation bar appearance

Paul Hudson    @twostraws    November 2nd 2023

iOS likes its navigation bars to look a very particular way, but we do have some limited control over its styling.

First, you've seen how we can use large or inline navigation title styles, giving us large or small text at the top. So, this will use a small title at the top:

NavigationStack {
    List(0..<100) { i in
        Text("Row \(i)")
    }
    .navigationTitle("Title goes here")
    .navigationBarTitleDisplayMode(.inline)
}

You'll see the navigation bar at the top is invisible by default, but as soon as you scroll up a little it gets a solid gray background so that its title stands out clearly from the contents of the list.

SwiftUI lets us customize that just a little: we can specify an alternative color to be used for that background. Remember, this is only visible when the list scrolls under the navigation bar, so you won't see it at first.

To try it out, add this below navigationBarTitleDisplayMode():

.toolbarBackground(.blue)

When you run the app and scroll a little, you'll see the navigation bar becomes a solid blue color. You'll also see the title might be hard to read, because it will be black text in light mode.

You can fix that by adding another modifier below the previous one, forcing the navigation bar to use dark mode at all times, which in turn means the title text will be white:

.toolbarColorScheme(.dark)

Tip: Later on you'll meet other kinds of toolbars. Those two modifiers affect all bars, but if you want to just modify the navigation bar you should add for: .navigationBar as a second parameter to both of them.

There's one last way to customize the navigation bar: you can hide it, either always or based on the current state in your app.

To do that, add the toolbar() modifier set to .hidden, either for all bars or just the navigation bar:

.toolbar(.hidden, for: .navigationBar)

Hiding the toolbar won't stop you from navigating to new views, but it might cause scrolling views to go under system information such as the clock – be careful!

Sponsor Hacking with Swift and reach the world's largest Swift community!