Start native apps faster with the Composables CLI ->
Compose Component

NavigationSuiteScaffold

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

Source set: Common
@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 NavigationSuiteItems
modifier the Modifier to be applied to the navigation suite scaffold
navigationSuiteType the current NavigationSuiteType. Defaults to NavigationSuiteScaffoldDefaults.navigationSuiteType
navigationSuiteColors 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 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, Arrangement.Center, or Arrangement.Bottom. Defaults to Arrangement.Top
primaryActionContent 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 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
Source set: Common
@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 to be applied to the navigation suite scaffold
layoutType the current NavigationSuiteType. Defaults to NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo
navigationSuiteColors 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 of this navigation suite scaffold
content the content of your screen
Source set: Common
@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 to be applied to the navigation suite scaffold
layoutType the current NavigationSuiteType. Defaults to NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo
navigationSuiteColors 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