Skip to main content
toolbar(content: ToolbarItem | ToolbarItemGroup | Group): Component;

​
Parameters

​
content
ToolbarItem | ToolbarItemGroup | Group
The toolbar content to display. Can be a single toolbar item, group of items, or a Group containing multiple items.

​
Support

​
Usage

​
Single toolbar item

VStack([
    Text("Content")
])
.toolbar(
    ToolbarItem(
        { placement: "navigationBarTrailing" },
        [
            Button("Save", () => console.log("Saved"))
        ]
    )
)

​
Multiple toolbar items

VStack([
    Text("Content")
])
.toolbar(
    Group([
        ToolbarItem(
            { placement: "navigationBarLeading" },
            [Button("Cancel", () => console.log("Cancel"))]
        ),
        ToolbarItem(
            { placement: "navigationBarTrailing" },
            [Button("Done", () => console.log("Done"))]
        )
    ])
)

​
Toolbar item group

VStack([
    Text("Content")
])
.toolbar(
    ToolbarItemGroup(
        { placement: "bottomBar" },
        [
            Button("Action 1", () => {}),
            Spacer(),
            Button("Action 2", () => {}),
            Button("Action 3", () => {})
        ]
    )
)