Skip to main content
ToolbarItemGroup(props: { placement?: ToolbarItemPlacement }, content: Component[]): ToolbarItemGroup;
​
placement
ToolbarItemPlacement
default:"automatic"
The shared placement for all items in the group. See ToolbarItemPlacement for all options.
​
content
Component[]
required
An array of components to display as a group in the toolbar. Typically Button components, optionally separated by Spacer.

​
Support

​
Usage

​
Trailing button group

VStack([Text("Content")])
    .toolbar(
        ToolbarItemGroup({ placement: "topBarTrailing" }, [
            Button("Edit", () => {}),
            Button("Share", () => {})
        ])
    )

​
Bottom bar with spacer

VStack([Text("Content")])
    .toolbar(
        ToolbarItemGroup({ placement: "bottomBar" }, [
            Button("Delete", () => {}),
            Spacer(),
            Button("Edit", () => {}),
            Button("Share", () => {})
        ])
    )

NavigationStack([
    VStack([Text("Document content")])
        .navigationTitle("Document")
        .toolbar(
            ToolbarItemGroup({ placement: "topBarTrailing" }, [
                Button(Image({ systemName: "pencil" }), () => {}),
                Button(Image({ systemName: "square.and.arrow.up" }), () => {})
            ])
        )
])

​
See Also