Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These iOS-only modifiers manage system toolbars — the navigation bar, tab bar, and bottom bar — typically inside a NavigationStack. Use toolbar to populate items and toolbarVisibility to show or hide whole bars. Pair toolbar with ToolbarItem for individually-placed items or ToolbarItemGroup when several items share a placement.

​
toolbar

Populates the toolbar with items, typically used inside a NavigationStack. 
.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.
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", () => {})
                ])
            ])
        )
])
Typically used inside a NavigationStack to place items in the navigation bar. Use ToolbarItem for individually-placed items and ToolbarItemGroup when multiple items share the same placement.

​
toolbarVisibility

Controls the visibility of system toolbars. 
.toolbarVisibility(
    visibility: "visible" | "hidden" | "automatic",
    bars?: ToolbarBarPlacement | ToolbarBarPlacement[]
): Component
​
visibility
"visible" | "hidden" | "automatic"
required
Whether the toolbar is visible, hidden, or determined automatically by the system.
​
bars
ToolbarBarPlacement | ToolbarBarPlacement[]
Which toolbars to affect (e.g., "navigationBar", "tabBar", "bottomBar"). When omitted, applies to all toolbars.
Hide navigation bar 
ScrollView([
    ForEach(items, (item) =>
        Text(item.name).padding(12)
    )
]).toolbarVisibility("hidden", "navigationBar")
Hide tab bar 
VStack([
    Text("Full screen content")
]).toolbarVisibility("hidden", "tabBar")
Hide all toolbars 
Image({ url: "photo.jpg" })
    .resizable()
    .scaledToFill()
    .ignoresSafeArea()
    .toolbarVisibility("hidden")
Hide multiple specific bars 
VStack([
    Text("Immersive view")
]).toolbarVisibility("hidden", ["navigationBar", "tabBar"])

​
See also