<h2 id="navigationsuitescaffold-navigationitems-modifier-navigationsuitetype-navigationsuitecolors-containercolor-contentcolor-state-navigationitemverticalarrangement-primaryactioncontent-primaryactioncontenthorizontalalignment-content">NavigationSuiteScaffold</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@Composable
fun NavigationSuiteScaffold(
    navigationItems: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationSuiteType: NavigationSuiteType =
        NavigationSuiteScaffoldDefaults.navigationSuiteType(WindowAdaptiveInfoDefault),
    navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(),
    containerColor: Color = NavigationSuiteScaffoldDefaults.containerColor,
    contentColor: Color = NavigationSuiteScaffoldDefaults.contentColor,
    state: NavigationSuiteScaffoldState = rememberNavigationSuiteScaffoldState(),
    navigationItemVerticalArrangement: Arrangement.Vertical =
        NavigationSuiteDefaults.verticalArrangement,
    primaryActionContent: @Composable (() -> Unit) = {},
    primaryActionContentHorizontalAlignment: Alignment.Horizontal =
        NavigationSuiteScaffoldDefaults.primaryActionContentAlignment,
    content: @Composable () -> Unit,
)
```

The Navigation Suite Scaffold wraps the provided content and places the adequate provided
navigation component on the screen according to the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType).

The navigation component can be animated to be hidden or shown via a
[NavigationSuiteScaffoldState](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/interfaces/NavigationSuiteScaffoldState).

The scaffold also supports an optional primary action composable, such as a floating action
button, which will be displayed according to the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType).

A simple usage example looks like this:

An usage with custom layout choices looks like this:

#### Parameters

| | |
| --- | --- |
| navigationItems | the navigation items to be displayed, typically [NavigationSuiteItem](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/composable-functions/NavigationSuiteItem)s |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to the navigation suite scaffold |
| navigationSuiteType | the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType). Defaults to [NavigationSuiteScaffoldDefaults.navigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/objects/NavigationSuiteScaffoldDefaults) |
| navigationSuiteColors | [NavigationSuiteColors](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteColors) that will be used to determine the container (background) color of the navigation component and the preferred color for content inside the navigation component |
| containerColor | the color used for the background of the navigation suite scaffold, including the passed `content` composable. Use `Color.Transparent` to have no color |
| contentColor | the preferred color to be used for typography and iconography within the passed in `content` lambda inside the navigation suite scaffold. |
| state | the [NavigationSuiteScaffoldState](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/interfaces/NavigationSuiteScaffoldState) of this navigation suite scaffold |
| navigationItemVerticalArrangement | the vertical arrangement of the items inside vertical navigation components (such as the types `NavigationSuiteType.WideNavigationRailCollapsed` and `NavigationSuiteType.WideNavigationRailExpanded`). It's recommended to use [Arrangement.Top](/jetpack-compose/androidx.compose.ui/ui-test/properties/top), [Arrangement.Center](/jetpack-compose/androidx.compose.ui/ui-geometry/properties/center), or [Arrangement.Bottom](/jetpack-compose/androidx.compose.ui/ui-test/properties/bottom). Defaults to [Arrangement.Top](/jetpack-compose/androidx.compose.ui/ui-test/properties/top) |
| primaryActionContent | The optional primary action content of the navigation suite scaffold, if any. Typically a [androidx.compose.material3.FloatingActionButton](/jetpack-compose/androidx.compose.material3/material3/components/FloatingActionButton). It'll be displayed inside vertical navigation components as part of their header , and above horizontal navigation components. |
| primaryActionContentHorizontalAlignment | The horizontal alignment of the primary action content, if present, when it's displayed along with a horizontal navigation component. |
| content | the content of your screen |

<hr class="docs-overload-divider">

<h2 id="navigationsuitescaffold-navigationsuiteitems-modifier-layouttype-navigationsuitecolors-containercolor-contentcolor-state-content">NavigationSuiteScaffold</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@Composable
fun NavigationSuiteScaffold(
    navigationSuiteItems: NavigationSuiteScope.() -> Unit,
    modifier: Modifier = Modifier,
    layoutType: NavigationSuiteType =
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault),
    navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(),
    containerColor: Color = NavigationSuiteScaffoldDefaults.containerColor,
    contentColor: Color = NavigationSuiteScaffoldDefaults.contentColor,
    state: NavigationSuiteScaffoldState = rememberNavigationSuiteScaffoldState(),
    content: @Composable () -> Unit = {},
)
```

The Navigation Suite Scaffold wraps the provided content and places the adequate provided
navigation component on the screen according to the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType).

Note: It is recommended to use the [NavigationSuiteScaffold](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/composable-functions/NavigationSuiteScaffold) function with the navigationItems
param that accepts [NavigationSuiteItem](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/composable-functions/NavigationSuiteItem)s instead of this one.

The navigation component can be animated to be hidden or shown via a
[NavigationSuiteScaffoldState](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/interfaces/NavigationSuiteScaffoldState).

#### Parameters

| | |
| --- | --- |
| navigationSuiteItems | the navigation items to be displayed |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to the navigation suite scaffold |
| layoutType | the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType). Defaults to [NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/objects/NavigationSuiteScaffoldDefaults) |
| navigationSuiteColors | [NavigationSuiteColors](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteColors) that will be used to determine the container (background) color of the navigation component and the preferred color for content inside the navigation component |
| containerColor | the color used for the background of the navigation suite scaffold, including the passed `content` composable. Use `Color.Transparent` to have no color |
| contentColor | the preferred color to be used for typography and iconography within the passed in `content` lambda inside the navigation suite scaffold. |
| state | the [NavigationSuiteScaffoldState](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/interfaces/NavigationSuiteScaffoldState) of this navigation suite scaffold |
| content | the content of your screen |

<div class='sourceset sourceset-common'>Common</div>

> **Deprecated** Deprecated in favor of NavigationSuiteScaffold with state parameter

<hr class="docs-overload-divider">

<h2 id="navigationsuitescaffold-navigationsuiteitems-modifier-layouttype-navigationsuitecolors-containercolor-contentcolor-content">NavigationSuiteScaffold</h2>

```kotlin
@Composable
fun NavigationSuiteScaffold(
    navigationSuiteItems: NavigationSuiteScope.() -> Unit,
    modifier: Modifier = Modifier,
    layoutType: NavigationSuiteType =
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault),
    navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors(),
    containerColor: Color = NavigationSuiteScaffoldDefaults.containerColor,
    contentColor: Color = NavigationSuiteScaffoldDefaults.contentColor,
    content: @Composable () -> Unit = {},
) =
    NavigationSuiteScaffold(
        navigationSuiteItems = navigationSuiteItems,
        modifier = modifier,
        state = rememberNavigationSuiteScaffoldState(),
        layoutType = layoutType,
        navigationSuiteColors = navigationSuiteColors,
        containerColor = containerColor,
        contentColor = contentColor,
        content = content,
    )
```

The Navigation Suite Scaffold wraps the provided content and places the adequate provided
navigation component on the screen according to the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType).

#### Parameters

| | |
| --- | --- |
| navigationSuiteItems | the navigation items to be displayed |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to the navigation suite scaffold |
| layoutType | the current [NavigationSuiteType](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteType). Defaults to [NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/objects/NavigationSuiteScaffoldDefaults) |
| navigationSuiteColors | [NavigationSuiteColors](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/classes/NavigationSuiteColors) that will be used to determine the container (background) color of the navigation component and the preferred color for content inside the navigation component |
| containerColor | the color used for the background of the navigation suite scaffold, including the passed `content` composable. Use `Color.Transparent` to have no color |
| contentColor | the preferred color to be used for typography and iconography within the passed in `content` lambda inside the navigation suite scaffold. |
| content | the content of your screen |