Composable Function

NavigationSuiteScaffold

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

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free
Common
@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.

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:

An usage with custom layout choices looks like this:

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

Common
@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.

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 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
Common
Deprecated Deprecated in favor of NavigationSuiteScaffold with state parameter

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

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