Toolbar

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. Populates the toolbar with items, typically used inside a NavigationStack.

.toolbar(content: ToolbarItem | ToolbarItemGroup | Group | (ToolbarItem | ToolbarItemGroup)[]): Component;

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

"visible" | "hidden" | "automatic"

required

Whether the toolbar is visible, hidden, or determined automatically by the system.

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"])

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

toolbarVisibility

See also

​toolbar

​toolbarVisibility

​See also

toolbar

toolbarVisibility

See also