Adding a Subtitle under NavigationTitle - swiftui

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!

Answer 1

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.

Answer 2

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

Answer 3

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)
}
}
}

Answer 4

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!