Recreating Apple Music’s Disappearing Navigation Title in SwiftUI

The controllable version: own the header#

A full implementation can combine:

• a custom top header inserted with safeAreaInset(edge: .top)
• scroll detection through ScrollGeometry
• separate visibility rules for the title and other toolbar items
• opacity and offset animations

SwiftUI already exposes the pieces:

1
.onScrollGeometryChange(...)
2
.safeAreaInset(...)
3
.toolbar(...)

They are building blocks rather than one navigation-bar option. A minimal version can track the vertical content offset and hide the header after a threshold:

1
struct CollapsingHeaderView: View {
2

3
    @State private var headerHidden = false
4

5
    var body: some View {
6
        ScrollView {
7
            VStack {
8
                ForEach(0..<50) { i in
9
                    Text("Row \(i)")
10
                        .frame(maxWidth: .infinity)
11
                        .padding()
12
                }
13
            }
14
        }
15
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
16
            geometry.contentOffset.y
17
        } action: { _, offset in
18
            headerHidden = offset > 40
19
        }
20
        .safeAreaInset(edge: .top) {
21
            header
22
                .opacity(headerHidden ? 0 : 1)
23
                .animation(.easeInOut, value: headerHidden)
24
        }
25
    }
26

27
    private var header: some View {
28
        HStack {
29
            Text("Library")
30
                .font(.largeTitle.bold())
31

32
            Spacer()
33

34
            Image(systemName: "person.crop.circle")
35
        }
36
        .padding()
37
        .background(.ultraThinMaterial)
38
    }
39
}

This works with content built from ScrollView, List, or LazyVStack, and the header can contain any layout or transition the screen needs. The hiding threshold is also under the app’s control.

The tradeoff is that the app now owns the behavior, including scroll direction, toolbar layout, refresh interactions, and nested navigation-stack edge cases. That is reasonable for a screen that needs a precise result, but excessive if the only goal is to remove the compact title.

The small shortcut: empty the compact title#

For the lighter version, place an empty view in the principal toolbar position:

1
.toolbar {
2
    ToolbarItem(placement: .principal) {
3
        Text("")
4
    }
5
}

Keep the normal large title:

1
.navigationTitle("Library")
2
.navigationBarTitleDisplayMode(.large)

The resulting transition is:

1
Large Title
2
   ↓ scroll
3
(empty)

The large title still appears at the top of the list. Once it collapses, the principal item supplies an empty compact title:

1
NavigationStack {
2
    List(items) { item in
3
        Text(item.title)
4
    }
5
    .navigationTitle("Library")
6
    .navigationBarTitleDisplayMode(.large)
7
    .toolbar {
8
        ToolbarItem(placement: .principal) {
9
            Text("")
10
        }
11
    }
12
}

This is enough to make a standard NavigationStack resemble Apple Music without introducing scroll state.

What the shortcut actually changes#

SwiftUI normally transitions between these title states:

1
Large Navigation Title
2
        ↓
3
Compact Navigation Title

The principal toolbar item replaces the content shown in the compact position. Making that item empty changes the visible result from:

1
Large Title
2
   ↓
3
Small Title

to:

1
Large Title
2
   ↓
3
(blank space)

The navigation bar has not been removed. Its compact title simply renders no content, which is why the effect looks convincing while requiring almost no code.

That distinction also defines the limits of the trick:

• the navigation bar still exists
• other toolbar items may continue to occupy space
• the result depends on current SwiftUI rendering behavior and may change in a future release

If the whole header and its layout must disappear, the custom scroll-driven version is the appropriate one. If an empty compact title is visually sufficient, the toolbar shortcut is much cheaper.

An official API may eventually replace both#

Apple has introduced UI behavior in system apps before exposing related public APIs. .searchable, large navigation titles, and the tab-bar minimization behavior shown in Apple Music followed that general pattern.

A future SwiftUI API could conceivably look like:

1
.navigationBarCollapseBehavior(.onScroll)

or:

1
.toolbarScrollVisibility(.hidden)

Those modifiers are only illustrative; SwiftUI does not currently provide them.