How it works
NavigationControlGroupStyle is the control group style that displays its controls as a navigation-style group, giving a ControlGroup the connected, segmented appearance used for back-and-forward style navigation affordances. Reach for it when you collect related directional or paging controls and want them rendered as a single cohesive unit rather than as separate, free-standing buttons. Like the other built-in ControlGroupStyle values, you don't construct it directly; instead you select it through the style modifier, which lets the system handle the platform-appropriate layout, spacing, and chrome for the grouped controls.
Group the controls in a ControlGroup
NavigationControlGroupStyle only takes effect on a ControlGroup, which is the container that gathers a set of related controls into one logical unit. In the example the
ControlGroupwraps twoButtonviews so they can be treated, laid out, and styled together as a single navigation group rather than as independent buttons.Apply it with controlGroupStyle(.navigation)
You opt into the style through the
controlGroupStyle(_:)modifier rather than instantiating NavigationControlGroupStyle yourself. Passing the.navigationshorthand resolves to this style and tells SwiftUI to render the enclosed controls with the connected, navigation-oriented presentation; the modifier is attached to theControlGroupso the style applies to everything inside it.Let the member controls describe themselves with Label
The style governs how the group is presented, while each child control supplies its own content. Here the
Buttonviews carryLabel("Back", systemImage: "chevron.left")andLabel("Forward", systemImage: "chevron.right"), so NavigationControlGroupStyle arranges those titled, symbol-bearing controls into the grouped navigation layout without you positioning them by hand.Rely on the ControlGroupStyle conformance for portability
NavigationControlGroupStyle conforms to ControlGroupStyle, which is why it slots into
controlGroupStyle(_:)interchangeably with the other built-in styles. Because the style is selected by value, you can swap.navigationfor a different style on the sameControlGroupand the controls re-render accordingly, with no change to theButtonorLabeldeclarations inside.
.controlGroupStyle(.navigation) to .controlGroupStyle(.automatic) and compare how the same ControlGroup of Back and Forward buttons is presented to see what the navigation style contributes.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 NavigationControlGroupStyleDemo: View {
var body: some View {
ControlGroup {
Button {
} label: {
Label("Back", systemImage: "chevron.left")
}
Button {
} label: {
Label("Forward", systemImage: "chevron.right")
}
}
.controlGroupStyle(.navigation)
.padding()
}
}