Github

Navigation Container

Represents a Material UI styled container for managing navigation stack and layout.

Overview

The NavigationContainer provides a navigation view with a MaterialUI-style navigation bar. It wraps the content in a custom-styled navigation stack or view, with different header styles and optional toolbar and back button configurations.

To use NavigationContainer, initialize it with the content you want to display within the navigation stack.

Apply the navigationContainerTitle, navigationContainerHeaderStyle, navigationContainerToolbar, and navigationContainerBackButtonHidden modifiers to configure the navigation bar’s title, style, toolbar, and back button visibility, respectively.

Initializer

Creates a navigation container with the specified content.

NavigationContainer(@ViewBuilder content: () -> Content)

Parameter

Parameter
Description

content

The content to be wrapped in the navigation container view.

Modifiers

Sets the title for the navigation container.

navigationContainerTitle(_ title: String)

Sets the style for the navigation container header. The default value is set to NavigationContainerHeaderStyle.large.

navigationContainerHeaderStyle(_ style: NavigationContainerHeaderStyle)

Sets the toolbar for the navigation container.

navigationContainerToolbar<Toolbar: View>(toolbar: () -> Toolbar)

Sets the visibility of the back button in the navigation container. The default value is set to true.

navigationContainerBackButtonHidden(_ hidden: Bool)

Sets the properties for the navigation container’s top bar.

navigationContainerTopBar(
    title: String,
    backButtonHidden: Bool,
    style: NavigationContainerHeaderStyle
)

For detailed descriptions of the available header styles, refer to the NavigationContainerHeaderStyle.

Example

NavigationContainer {
    Collection {
        Text("Item 1")
        Text("Item 2")
    }
    
    .navigationContainerTitle("My Title")
    .navigationContainerHeaderStyle(.large)
    .navigationContainerToolbar {
        ActionButton("Toolbar", style: .text) {
            Void()
        }
    }
    .navigationContainerBackButtonHidden(true)
}

Alternatively, use the navigationContainerTopBar method to set the title, back button visibility, and header style in one call:

NavigationContainer {
    Collection {
        Text("Item 1")
        Text("Item 2")
    }
    .navigationContainerTopBar(title: "My Title", backButtonHidden: false, style: .inline)
    .navigationContainerToolbar {
        ActionButton("Toolbar", style: .text) {
            Void()
        }
    }
}

See Also

PreviousIconButtonStyleNextNavigationContainerHeaderStyle

Last updated