If two NavigationStacks are nested with the inner stack in a sheet NavigationLinks in the inner stack open as expected in the inner stack.
struct ContentView: View {
var body: some View {
NavigationStack {
Color.clear
.sheet(isPresented: .constant(true)) {
NavigationStack {
ExampleList()
.navigationTitle("Inner Navigation Stack")
}
.presentationDetents([.medium])
}
.navigationTitle("Outer Navigation Stack")
}
}
}
If I try the same with an overlay instead of a sheet, NavigationLinks in the inner stack unexpectedly open in the outer stack.
struct ContentView: View {
var body: some View {
NavigationStack {
Color.clear
.overlay(alignment: .bottomTrailing) {
NavigationStack {
ExampleList()
.navigationTitle("Inner Navigation Stack")
}
.frame(width: 200, height: 250)
.border(.black, width: 5)
.padding()
.presentationDetents([.medium])
}
.navigationTitle("Outer Navigation Stack")
}
}
}
Even the navigation title for the outer stack is being overridden by the inner stack's navigation title.
TLDR
What magic is sheet using that allows for nested NavigationStacks and how might I approach getting this to work in an overlay?
- iOS 18.2
- Xcode 16.2
The definition of ExampleList for reproducibility:
struct ExampleList: View {
var body: some View {
List(1..<5) { number in
NavigationLink("\(number)") {
Text("\(number)")
.font(.largeTitle)
}
}
}
}