How it works
UIOrnament is the base class for ornaments, the floating accessory components that visionOS attaches to the edges of a scene rather than placing inside its content. Reach for an ornament when you want toolbars, tab bars, or controls to hover just outside a window's bounds along a fixed edge, so they stay visible and reachable without crowding the primary view. In SwiftUI you rarely instantiate UIOrnament directly; instead you apply the ornament(attachmentAnchor:contentAlignment:ornament:) modifier, which builds and positions an ornament from a view you supply. It solves the spatial-layout problem of presenting persistent chrome that reads as part of the window yet sits in its own plane along an edge.
Attach an ornament with the ornament modifier
Rather than constructing a UIOrnament yourself, apply the
.ornamentmodifier to the view whose edges should carry the accessory. It produces and manages the underlying ornament for you, taking a trailing closure that returns the ornament's content. Here it hangs off theText("Spatial Window")view that forms the scene's body.Pin the ornament to an edge with attachmentAnchor
The
attachmentAnchorparameter decides which edge of the scene the ornament binds to and how it tracks that edge. Passing.scene(.bottom)anchors it relative to the whole scene along the bottom edge, so the accessory floats below the window and follows it as the window moves or resizes.Supply the ornament's content view
The modifier's closure returns the view that becomes the ornament's body, and you compose it with ordinary SwiftUI views. In the example a
Label("Ornament Toolbar", systemImage: "slider.horizontal.3")provides the toolbar's text and glyph, giving the ornament a recognizable control affordance.Give the ornament its own surface with glassBackgroundEffect
Because an ornament sits in its own plane apart from the window, it needs a backing surface to read as a distinct floating element. Applying
.glassBackgroundEffect()to the content draws the system's translucent glass material behind it, and the surrounding.padding()keeps the label clear of that surface's edges.
.scene(.bottom) to .scene(.top) and watch the ornament reanchor so the toolbar floats above the window instead of below it.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct UIOrnamentDemo: View {
var body: some View {
Text("Spatial Window")
.font(.title)
.padding()
.ornament(attachmentAnchor: .scene(.bottom)) {
Label("Ornament Toolbar", systemImage: "slider.horizontal.3")
.padding()
.glassBackgroundEffect()
}
.padding()
}
}