History
Loading...
Learn a little bit every day
Learn a little bit every day
Loading...
October 4, 2025
.toolbar { ToolbarItem(placement: .topBarTrailing) { Button(...) } } instead of adding buttons directly to navigation bar modifiers. This automatically adapts to different platforms - on iOS it appears in the navigation bar, on macOS in the window toolbar, and on watchOS in the appropriate contextual location.This approach uses semantic toolbar placements (`.primaryAction`, `.cancellationAction`, `.status`) rather than specific positions like `.topBarTrailing`. The system automatically places these items in the most appropriate location for each platform and context, ensuring consistent user experience across devices.
struct DocumentView: View {
@State private var isEditing = false
var body: some View {
NavigationStack {
DocumentContent()
.toolbar {
ToolbarItemGroup(placement: .primaryAction) {
Button("Share") { shareDocument() }
Button(isEditing ? "Done" : "Edit") {
isEditing.toggle()
}
}
ToolbarItem(placement: .cancellationAction) {
Button("Cancel") { dismissView() }
}
ToolbarItem(placement: .status) {
Text("Last saved: 2:30 PM")
.font(.caption2)
.foregroundStyle(.secondary)
}
}
}
}
}Semantic placement makes your app feel native on every platform without conditional code. `.primaryAction` places buttons where users expect primary actions (trailing on iOS, right side on macOS), while `.cancellationAction` positions cancel buttons in the standard dismissal location. This reduces platform-specific code and automatically handles edge cases like compact size classes.