Sheet-like presentation on the side on iPad

Question

Created 3w

Replies 2

Boosts 1

Participants 2

Is there a way to get a sheet on the side over an interactive view with a proper glass background on iPad? Ideally, including being able to drag the sheet between medium/large-height sizes (like a sheet with presentationDetents on iPhone), similar to the Maps app:

Simulator Screenshot - iPad (A16) - 2025-07-17 at 21.35.01.png

I tried the NavigationSplitView like in the NavigationCookbook example. This is somewhat like it, but it's too narrow (sidebar-like) and doesn't get the full navigation bar:

Simulator Screenshot - iPad (A16) - 2025-07-17 at 13.16.54.png

I also played around with .sheet and .presentationDetents and the related modifiers, thinking I could make the sheet appear to the side; but no luck here. It seems to have all the correct behaviors, but it's always presented form-like in the center:

Simulator Screenshot - iPad (A16) - 2025-07-17 at 21.42.07.png

Example code for the sheet:

import SwiftUI
import MapKit
 
struct ContentView: View {
    var body: some View {
        Map()
            .sheet(isPresented: .constant(true)) {
                NavigationStack {
                    VStack {
                        Text("Hello")
                        
                        NavigationLink("Show Foo") {
                            Text("Foo")
                                .navigationTitle("Foo")
                                .containerBackground(Color.clear, for: .navigation)
                        }
                        
                    }
                }
                .presentationDetents([.medium, .large])
                .presentationBackgroundInteraction(.enabled)
            }
    }
}

I also tried placing the NavigationStack as an overlay and putting a .glassEffect behind it. From the first sight, this looks okay-ish on beta 3, but seems prone to tricky gotchas and edge cases around the glass effects and related transitions. Seems like not a good approach to me, building such navigational containers myself has been a way too big time-sink for me in the past...

Simulator Screenshot - iPad (A16) - 2025-07-17 at 21.52.07.png

Anyway, example code for the overlay approach:

import SwiftUI
import MapKit
 
struct ContentView: View {
    var body: some View {
        Map()
            .overlay(alignment: .topLeading) {
                NavigationStack {
                    VStack {
                        Text("Hello")

                        NavigationLink("Show Foo") {
                            ScrollView {
                                VStack {
                                    ForEach(1...30, id: \.self) { no in
                                        Button("Hello world") {}
                                            .buttonStyle(.bordered)
                                    }
                                }
                                .frame(maxWidth: .infinity)
                            }
                                .navigationTitle("Foo")
                                .containerBackground(Color.clear, for: .navigation)
                        }
                        
                    }
                    .containerBackground(Color.clear, for: .navigation)
                }
                .frame(width: 400)
                .frame(height: 600)
                .glassEffect(.regular, in: .rect(cornerRadius: 22))
                .padding()
            }
            
    }
}

Do I miss something here or is this not possible currently with built-in means of the SwiftUI API?

Boost

Answer 1

StephenJohnson OP

2w

I have also been trying to build a side sheet like this and so far the only way I have found to do it is the same as you by placing a NavigationStack as an overlay with a glass effect background.

But I have run into a problem with that. If I have a button with a menu, when the menu is presented, the glass background behind the NavigationStack disappears. This doesn't happen if I use a regular sheet.

0

Answer 2

ralf.ebert OP

1w

I filed 2 feedback reports about this:

FB19252284: Support for side/corner-attached .sheet() with presentationDetents on iPad

I’m suggesting to add support for .sheet() with presentationDetents on iPad; with the sheet then attaching to the side / to the corner of the screen, similar to how the Maps app presents its sheet. Currently the sheet always presents form/page-like in the middle of the screen which is of limited use for apps that want to present a map behind the sheet.

It would be great if the side/corner (trailing/leading; trailing-bottom or leading-bottom corner) and the sheet width could be configured.

Attached are screen shots of a standalone example with a custom glass container used for non-draggable sheet-like presentation and the Maps app with its fully draggable side sheet:

FB19252414: Container glass background disappears when a Menu with a glass effect appears

When .glassEffect() is used to build a custom sideways sheet-like presentation on iPad, the glass background disappears when a Menu with a glass effect appears.

Example code:

import MapKit
import SwiftUI

struct ContentView: View {

    var body: some View {
            Map()
                .overlay(alignment: .topLeading) {
                    NavigationStack {
                        VStack {
                            Text("Sheet over map example")
                        }
                        .toolbar {
                            ToolbarItem(placement: .topBarTrailing) {
                                Menu(
                                    content: {
                                        Button("Example") {}
                                    },
                                    label: {
                                        Image(systemName: "ellipsis")
                                    }
                                )
                            }
                        }
                        .navigationTitle("Example")
                        .navigationBarTitleDisplayMode(.inline)
                        .containerBackground(Color.clear, for: .navigation)
                    }
                    .frame(width: 400)
                    .frame(maxHeight: .infinity)
                    .glassEffect(.regular, in: .rect(cornerRadius: 22))
                    .padding()
        }
    }
}

#Preview {
    ContentView()
}

0