Skip to main content
.toolbar(content: ToolbarItem | ToolbarItemGroup | Group | (ToolbarItem | ToolbarItemGroup)[]): Component;
​
content
ToolbarItem | ToolbarItemGroup | Group | (ToolbarItem | ToolbarItemGroup)[]
required
The toolbar content. Can be a single item, a group, or an array of items.

​
Support

​
Usage

​
Single toolbar item

VStack([Text("Content")])
    .toolbar(
        ToolbarItem({ placement: "topBarTrailing" }, [
            Button("Save", () => handleSave())
        ])
    )

​
Multiple toolbar items

VStack([Text("Content")])
    .toolbar([
        ToolbarItem({ placement: "topBarLeading" }, [
            Button("Cancel", () => {})
        ]),
        ToolbarItem({ placement: "topBarTrailing" }, [
            Button("Done", () => {})
        ])
    ])

​
Toolbar item group

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

​
Using Group for mixed placements

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

​
In a NavigationStack

NavigationStack([
    VStack([Text("Main content")])
        .navigationTitle("My App")
        .toolbar(
            ToolbarItem({ placement: "topBarTrailing" }, [
                Menu({ label: Image({ systemName: "ellipsis.circle" }) }, [
                    Button("Settings", () => {}),
                    Button("Help", () => {})
                ])
            ])
        )
])

​
Notes

​
See Also