---
title: "NavigationSuiteScaffold"
description: "The Navigation Suite Scaffold wraps the provided content and places the adequate provided navigation component on the screen according to the current [NavigationSuiteType]."
type: "component"
---
## API Reference

### NavigationSuiteScaffold

> Source set: Common

```kotlin
@Composable
public 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,
)
```

#### Parameters

| | |
| --- | --- |
| navigationItems | the navigation items to be displayed, typically [NavigationSuiteItem](/jetpack-compose/androidx.compose.material3/material3-adaptive-navigation-suite/components/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 |

### NavigationSuiteScaffold

> Source set: Common

```kotlin
@Composable
public 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 = {},
)
```

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

### NavigationSuiteScaffold

> Source set: Common

```kotlin
@Deprecated(
    message = "Deprecated in favor of NavigationSuiteScaffold with state parameter",
    level = DeprecationLevel.HIDDEN,
)
@Composable
public 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 = {},
): Unit
```

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

## Code Examples

### NavigationSuiteScaffoldSample

```kotlin
@Preview
@Sampled
@Composable
fun NavigationSuiteScaffoldSample() {
    var selectedItem by remember { mutableIntStateOf(0) }
    val navItems = listOf("Songs", "Artists", "Playlists")
    val navSuiteType =
        NavigationSuiteScaffoldDefaults.navigationSuiteType(currentWindowAdaptiveInfoV2())
    val state = rememberNavigationSuiteScaffoldState()
    val scope = rememberCoroutineScope()

    NavigationSuiteScaffold(
        state = state,
        navigationItems = {
            navItems.forEachIndexed { index, navItem ->
                NavigationSuiteItem(
                    icon = {
                        Icon(
                            if (selectedItem == index) Icons.Filled.Favorite
                            else Icons.Outlined.FavoriteBorder,
                            contentDescription = null,
                        )
                    },
                    label = { Text(navItem) },
                    selected = selectedItem == index,
                    onClick = { selectedItem = index },
                )
            }
        },
    ) {
        // Screen content.
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text(
                modifier = Modifier.padding(16.dp),
                text =
                    "Current NavigationSuiteType: $navSuiteType\n" +
                        "Visibility: ${state.currentValue}",
                textAlign = TextAlign.Center,
            )
            Button(onClick = { scope.launch { state.toggle() } }) {
                Text("Hide/show navigation component")
            }
        }
    }
}
```

### NavigationSuiteScaffoldCustomConfigSample

```kotlin
@Preview
@Sampled
@Composable
@Suppress("DEPRECATION") // WindowWidthSizeClass is deprecated
fun NavigationSuiteScaffoldCustomConfigSample() {
    var selectedItem by remember { mutableIntStateOf(0) }
    val navItems = listOf("Songs", "Artists", "Playlists")
    // Custom configuration that shows a wide navigation rail in small/medium width screens, an
    // expanded wide navigation rail in expanded width screens, and a short navigation bar in small
    // height screens.
    val navSuiteType =
        with(currentWindowAdaptiveInfoV2()) {
            if (
                windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.COMPACT ||
                    windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.MEDIUM
            ) {
                NavigationSuiteType.WideNavigationRailCollapsed
            } else if (windowSizeClass.windowHeightSizeClass == WindowHeightSizeClass.COMPACT) {
                NavigationSuiteType.ShortNavigationBarMedium
            } else if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
                NavigationSuiteType.WideNavigationRailExpanded
            } else {
                NavigationSuiteScaffoldDefaults.navigationSuiteType(currentWindowAdaptiveInfoV2())
            }
        }
    val state = rememberNavigationSuiteScaffoldState()
    val scope = rememberCoroutineScope()

    NavigationSuiteScaffold(
        navigationSuiteType = navSuiteType,
        state = state,
        navigationItemVerticalArrangement = Arrangement.Center,
        navigationItems = {
            navItems.forEachIndexed { index, navItem ->
                NavigationSuiteItem(
                    navigationSuiteType = navSuiteType,
                    icon = {
                        Icon(
                            if (selectedItem == index) Icons.Filled.Favorite
                            else Icons.Outlined.FavoriteBorder,
                            contentDescription = null,
                        )
                    },
                    label = { Text(navItem) },
                    selected = selectedItem == index,
                    onClick = { selectedItem = index },
                )
            }
        },
    ) {
        // Screen content.
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text(
                modifier = Modifier.padding(16.dp),
                text =
                    "Current NavigationSuiteType: $navSuiteType\n" +
                        "Visibility: ${state.currentValue}",
                textAlign = TextAlign.Center,
            )
            Button(onClick = { scope.launch { state.toggle() } }) {
                Text("Hide/show navigation component")
            }
        }
    }
}
```