Adding a Subtitle under NavigationTitle

Question

Let's say I have the following code:

struct SwiftUIView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello")
                Text("World")
            }
            .navigationTitle("SwiftUI")
        }
    }
}

I'd like to add a smaller subtitle right under SwiftUI. I tried adding something like .navigationSubtitle("") but it doesn't exist. I also tried reading the documentation, and it does mention func navigationSubtitle(_ subtitle: Text) -> some View, but I'm just not sure how to add that to my code. Thanks in advance!

Maybe this may be helpful for you? [How can I add something like a “subheader” into the navigation bar in SwiftUI?](https://stackoverflow.com/questions/58698206/how-can-i-add-something-like-a-subheader-into-the-navigation-bar-in-swiftui) — Bernhard, Jan 21 '21 at 13:05
check right side of the document : macOS 11.0+ Mac Catalyst 14.0+ — Raja Kishan, Jan 21 '21 at 13:10
@Bernhard, I saw that too. But is there a way to put it under the header instead of on top? — Nico Cobelo, Jan 21 '21 at 13:45

pawello2222 · Answer 1 · 2021-01-21T14:47:35.063

You can add a ToolbarItem with the principal placement:

struct SwiftUIView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello")
                Text("World")
            }
            // .navigationTitle("SwiftUI") this won't make any changes now
            .toolbar {
                ToolbarItem(placement: .principal) {
                    VStack {
                        Text("title")
                        Text("subtitle")
                    }
                }
            }
        }
    }
}

The downside is that it overrides the navigation title, so any changes made with navigationTitle won't visible.

score 2 · Answer 2 · answered Jan 27 '23 at 15:28

Using a VStack in a toolbar causes the child view to display < Back for the the back navigation button rather than the title of the parent view. What I ended up doing is:

.navigationTitle("Title") // Will not be shown, but will be used for the back button of the child view
.toolbar {
    ToolbarItem(placement: .principal) {
        VStack {
            Text("Real Title").font(.headline)
            Text("Subtitle").font(.subheadline)
        }
    }
}

score 1 · Answer 3 · answered May 18 '21 at 14:12

1

You can do something like:

.navigationBarItems(leading:
    VStack(alignment: .leading, spacing: 5) {
        Text("SwiftUI")
            .font(.system(size: 35, weight: .semibold, design: .default))
        Text("Subtitle")
    }
 )

answered May 18 '21 at 14:12

Abv

354
2
13

score -1 · Accepted Answer · answered Jan 21 '21 at 18:39

I ended up doing something different: instead of making "SwiftUI" a navigation title, I just put it inside a VStack with the rest of the body, like so:

struct SwiftUIView: View {
var body: some View {
    NavigationView {
                VStack {
                    
                    //Header
                    VStack(alignment: .leading, spacing: 5) {
                        Text("SwiftUI")
                            .font(.system(size: 35, weight: .semibold, design: .default))
                        Text("Subtitle")
                    }
                    .padding()
                    .padding(.leading, -110) //I'm still not sure how to give it a leading alignment without hardcoding it
                    Divider()
                    Spacer()
                    
                    //Body
                    VStack {
                        Text("Hello")
                        Text("World")
                    }
                    Spacer()
                    
                    //Navbar title
                }
        }
}}

Thank you all for the help regardless!

Adding a Subtitle under NavigationTitle

4 Answers4