I’m building a photo upload component in SwiftUI where the entire rectangular area should be tappable to show a Menu with options (Photo Library / Camera).
The problem: No matter what I try, the Menu popup always appears anchored to the TOP of the label, but I need it to appear at the CENTER of my tappable rectangle.
Current behavior:
Expected behavior: Menu should appear in the center of this area:
My current code:
import SwiftUI
import PhotosUI
struct PhotoUploaderExample: View {
@State private var selectedImage: UIImage?
@State private var showingImagePicker = false
@State private var showingCamera = false
private let placeholderSide: CGFloat = UIScreen.main.bounds.width - 32
var body: some View {
VStack(alignment: .leading, spacing: 12) {
Text("Add a photo")
.font(.system(size: 20, weight: .semibold))
photoUploadArea
}
.padding(.horizontal, 16)
.sheet(isPresented: $showingImagePicker) {
// Photo library picker
}
.fullScreenCover(isPresented: $showingCamera) {
// Camera
}
}
var photoUploadArea: some View {
ZStack {
// Background rectangle with dashed border
RoundedRectangle(cornerRadius: 24)
.fill(Color.gray.opacity(0.05))
.strokeBorder(
Color.gray.opacity(0.3),
style: StrokeStyle(lineWidth: 2, dash: [8, 5])
)
.frame(width: placeholderSide, height: placeholderSide)
// Content overlay - icon and button
VStack(spacing: 12) {
Image(systemName: "photo.badge.plus.fill")
.resizable()
.scaledToFit()
.frame(width: 48, height: 48)
Text("Add a photo")
.font(.system(size: 15, weight: .medium))
.padding(.horizontal, 20)
.padding(.vertical, 8)
.background(Color.gray.opacity(0.1))
.clipShape(Capsule())
}
// Menu - stretched to fill entire area
Menu {
Button(action: {
showingImagePicker = true
}) {
Label("Photo Library", systemImage: "photo.on.rectangle")
}
Button(action: {
showingCamera = true
}) {
Label("Camera", systemImage: "camera")
}
} label: {
Color.clear
.contentShape(Rectangle())
}
.frame(width: placeholderSide, height: placeholderSide)
}
}
}
#Preview {
PhotoUploaderExample()
}
What I’ve tried:
- Wrapping Menu in different container views
- Using Color.clear as label with .contentShape(Rectangle())
- Placing a small invisible anchor at center
Questions:
- Is there any native way to control Menu popup anchor position?
Looking for native SwiftUI solutions only – no third-party libraries please.
Goal: Tapping anywhere inside the rectangle (not just the icon/button) should show the Menu centered within that area.

![ios - SwiftUI Menu always appears at top of label - how to show it at center of tappable area? 2 [SCREENSHOT 2 - empty upload area]](https://i.sstatic.net/kEJgcRMbm.png)