Skip to main content
ToolbarItemGroup(props: { placement?: ToolbarItemPlacement }, content: Component[]): Component;

​
Parameters

​
props.placement
ToolbarItemPlacement
Where to place the toolbar item group (e.g., “navigationBarTrailing”, “bottomBar”).
​
content
Component[]
Array of components to display as a group in the toolbar.

​
Support

​
Usage

​
Bottom toolbar group

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

VStack([
    Text("Content")
])
.toolbar(
    ToolbarItemGroup(
        { placement: "navigationBarTrailing" },
        [
            Button("Cancel", () => {}),
            Button("Save", () => {})
        ]
    )
)

​
Multiple actions with spacers

VStack([
    Text("Document content")
])
.toolbar(
    ToolbarItemGroup(
        { placement: "bottomBar" },
        [
            Button("Back", () => {}),
            Spacer(),
            Button("Print", () => {}),
            Button("Export", () => {}),
            Spacer(),
            Button("Help", () => {})
        ]
    )
)