> For the complete documentation index, see [llms.txt](https://swift-packages.gitbook.io/materialuikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swift-packages.gitbook.io/materialuikit/components/navigation-container.md).

# 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.

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

### Parameter

<table><thead><tr><th width="169">Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>content</code></td><td>The content to be wrapped in the navigation container view.</td></tr></tbody></table>

### Modifiers

Sets the title for the navigation container.

```swift
navigationContainerTitle(_ title: String)
```

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

```swift
navigationContainerHeaderStyle(_ style: NavigationContainerHeaderStyle)
```

Sets the toolbar for the navigation container.

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

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

```swift
navigationContainerBackButtonHidden(_ hidden: Bool)
```

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

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

> For detailed descriptions of the available header styles, refer to the [NavigationContainerHeaderStyle](/materialuikit/components/navigation-container/navigationcontainerheaderstyle.md).

### Example

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

<figure><picture><source srcset="/files/Xnjh2bOu6D5phaK8eOuB" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2Fuah0ti3qPXluREXjkdq2%2FNC%20Light.png?alt=media&amp;token=94bda963-2805-43dc-8784-1b6a7ecf718e" alt=""></picture><figcaption></figcaption></figure>

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

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

<figure><picture><source srcset="/files/jxdfrdLnB6cJ8vKnHdeL" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FfjRafmD4DzdlOHPtJgvb%2FINline%20light.png?alt=media&amp;token=54bce1d6-6dde-4f3d-90c5-d5b22a256034" alt=""></picture><figcaption></figcaption></figure>

#### See Also

* [Navigation Route](/materialuikit/components/navigation-container/navigation-route.md)
* [Navigation Route Label](/materialuikit/components/navigation-container/navigation-route-label.md)