NavigationSuiteScaffold

Functions summary

Unit
@Composable
NavigationSuiteScaffold(
    navigationSuiteItems: NavigationSuiteScope.() -> Unit,
    modifier: Modifier,
    layoutType: NavigationSuiteType,
    navigationSuiteColors: NavigationSuiteColors,
    containerColor: Color,
    contentColor: Color,
    state: NavigationSuiteScaffoldState,
    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.
Cmn
Unit
@Composable
NavigationSuiteScaffold(
    navigationItems: @Composable () -> Unit,
    modifier: Modifier,
    navigationSuiteType: NavigationSuiteType,
    navigationSuiteColors: NavigationSuiteColors,
    containerColor: Color,
    contentColor: Color,
    state: NavigationSuiteScaffoldState,
    navigationItemVerticalArrangement: Arrangement.Vertical,
    primaryActionContent: @Composable () -> Unit,
    primaryActionContentHorizontalAlignment: Alignment.Horizontal,
    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.
Cmn

Functions

Cmn 
@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 = {}
): Unit

The Navigation Suite Scaffold wraps the provided content and places the adequate provided navigation component on the screen according to the current NavigationSuiteType.

Note: It is recommended to use the NavigationSuiteScaffold function with the navigationItems param that accepts NavigationSuiteItems instead of this one.

The navigation component can be animated to be hidden or shown via a NavigationSuiteScaffoldState.

Parameters
navigationSuiteItems: NavigationSuiteScope.() -> Unit

the navigation items to be displayed
modifier: Modifier = Modifier

the Modifier to be applied to the navigation suite scaffold
layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault)

the current NavigationSuiteType. Defaults to NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo
navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors()

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: Color = NavigationSuiteScaffoldDefaults.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: Color = NavigationSuiteScaffoldDefaults.contentColor

the preferred color to be used for typography and iconography within the passed in content lambda inside the navigation suite scaffold.
state: NavigationSuiteScaffoldState = rememberNavigationSuiteScaffoldState()

the NavigationSuiteScaffoldState of this navigation suite scaffold
content: @Composable () -> Unit = {}

the content of your screen
Cmn 
@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
): Unit

The Navigation Suite Scaffold wraps the provided content and places the adequate provided navigation component on the screen according to the current NavigationSuiteType.

The navigation component can be animated to be hidden or shown via a 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.

A simple usage example looks like this:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteItem
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.material3.adaptive.navigationsuite.rememberNavigationSuiteScaffoldState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

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

An usage with custom layout choices looks like this:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteItem
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.material3.adaptive.navigationsuite.rememberNavigationSuiteScaffoldState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.window.core.layout.WindowHeightSizeClass
import androidx.window.core.layout.WindowWidthSizeClass

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")
        }
    }
}
Parameters
navigationItems: @Composable () -> Unit

the navigation items to be displayed, typically NavigationSuiteItems
modifier: Modifier = Modifier

the Modifier to be applied to the navigation suite scaffold
navigationSuiteType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.navigationSuiteType(WindowAdaptiveInfoDefault)

the current NavigationSuiteType. Defaults to NavigationSuiteScaffoldDefaults.navigationSuiteType
navigationSuiteColors: NavigationSuiteColors = NavigationSuiteDefaults.colors()

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: Color = NavigationSuiteScaffoldDefaults.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: Color = NavigationSuiteScaffoldDefaults.contentColor

the preferred color to be used for typography and iconography within the passed in content lambda inside the navigation suite scaffold.
state: NavigationSuiteScaffoldState = rememberNavigationSuiteScaffoldState()

the NavigationSuiteScaffoldState of this navigation suite scaffold
navigationItemVerticalArrangement: Arrangement.Vertical = NavigationSuiteDefaults.verticalArrangement

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, Arrangement.Center, or Arrangement.Bottom. Defaults to Arrangement.Top
primaryActionContent: @Composable () -> Unit = {}

The optional primary action content of the navigation suite scaffold, if any. Typically a androidx.compose.material3.FloatingActionButton. It'll be displayed inside vertical navigation components as part of their header , and above horizontal navigation components.
primaryActionContentHorizontalAlignment: Alignment.Horizontal = NavigationSuiteScaffoldDefaults.primaryActionContentAlignment

The horizontal alignment of the primary action content, if present, when it's displayed along with a horizontal navigation component.
content: @Composable () -> Unit

the content of your screen