If two NavigationStack
s are nested with the inner stack in a sheet
NavigationLink
s 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
, NavigationLink
s 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 NavigationStack
s 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)
}
}
}
}