androidx.compose.material3.adaptive.navigationsuite

Interfaces

NavigationSuiteScope

The scope associated with the NavigationSuiteScope.

Cmn

Classes

`NavigationSuiteColors`	Represents the colors of a `NavigationSuite`.	Cmn
`NavigationSuiteItemColors`	Represents the colors of a `NavigationSuiteScope.item`.	Cmn
`NavigationSuiteType`	Class that describes the different navigation suite types of the `NavigationSuiteScaffold`.	Cmn

Objects

`NavigationSuiteDefaults`	Contains the default values used by the `NavigationSuite`.	Cmn
`NavigationSuiteScaffoldDefaults`	Contains the default values used by the `NavigationSuiteScaffold`.	Cmn

Annotations

ExperimentalMaterial3AdaptiveNavigationSuiteApi

Cmn

Top-level functions summary

`Unit`	`@Composable NavigationSuite( modifier: Modifier, layoutType: NavigationSuiteType, colors: NavigationSuiteColors, content: NavigationSuiteScope.() -> Unit )` The default Material navigation component according to the current `NavigationSuiteType` to be used with the `NavigationSuiteScaffold`.	Cmn
`Unit`	`@Composable NavigationSuiteScaffold( navigationSuiteItems: NavigationSuiteScope.() -> Unit, modifier: Modifier, layoutType: NavigationSuiteType, navigationSuiteColors: NavigationSuiteColors, containerColor: Color, contentColor: Color, 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 NavigationSuiteScaffoldLayout( navigationSuite: @Composable () -> Unit, layoutType: NavigationSuiteType, content: @Composable () -> Unit )` Layout for a `NavigationSuiteScaffold`'s content.	Cmn

Top-level functions

NavigationSuite

Cmn

Artifact: androidx.compose.material3:material3-adaptive-navigation-suite

View Source

@Composable
fun NavigationSuite(
    modifier: Modifier = Modifier,
    layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault),
    colors: NavigationSuiteColors = NavigationSuiteDefaults.colors(),
    content: NavigationSuiteScope.() -> Unit
): Unit

The default Material navigation component according to the current NavigationSuiteType to be used with the NavigationSuiteScaffold.

For specifics about each navigation component, see NavigationBar, NavigationRail, and PermanentDrawerSheet.

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to the navigation component
`layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault)`	the current `NavigationSuiteType` of the `NavigationSuiteScaffold`. Defaults to `NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo`
`colors: 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
`content: NavigationSuiteScope.() -> Unit`	the content inside the current navigation component, typically `NavigationSuiteScope.item`s

NavigationSuiteScaffold

Cmn

Artifact: androidx.compose.material3:material3-adaptive-navigation-suite

View Source

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

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

Example default usage:

import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuite
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var selectedItem by remember { mutableIntStateOf(0) }
val navItems = listOf("Songs", "Artists", "Playlists")
val navSuiteType =
    NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(currentWindowAdaptiveInfo())

NavigationSuiteScaffold(
    navigationSuiteItems = {
        navItems.forEachIndexed { index, navItem ->
            item(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = navItem) },
                label = { Text(navItem) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
) {
    // Screen content.
    Text(
        modifier = Modifier.padding(16.dp),
        text = "Current NavigationSuiteType: $navSuiteType"
    )
}

Example custom configuration usage:

import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuite
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.window.core.layout.WindowWidthSizeClass

var selectedItem by remember { mutableIntStateOf(0) }
val navItems = listOf("Songs", "Artists", "Playlists")
val adaptiveInfo = currentWindowAdaptiveInfo()
// Custom configuration that shows a navigation drawer in large screens.
val customNavSuiteType =
    with(adaptiveInfo) {
        if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
            NavigationSuiteType.NavigationDrawer
        } else {
            NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
        }
    }

NavigationSuiteScaffold(
    layoutType = customNavSuiteType,
    navigationSuiteItems = {
        navItems.forEachIndexed { index, navItem ->
            item(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = navItem) },
                label = { Text(navItem) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
) {
    // Screen content.
    Text(
        modifier = Modifier.padding(16.dp),
        text = "Current custom NavigationSuiteType: $customNavSuiteType"
    )
}

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.
`content: @Composable () -> Unit = {}`	the content of your screen

NavigationSuiteScaffoldLayout

Cmn

Artifact: androidx.compose.material3:material3-adaptive-navigation-suite

View Source

@Composable
fun NavigationSuiteScaffoldLayout(
    navigationSuite: @Composable () -> Unit,
    layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault),
    content: @Composable () -> Unit = {}
): Unit

Layout for a NavigationSuiteScaffold's content. This function wraps the content and places the navigationSuite component according to the given layoutType.

The usage of this function is recommended when you need some customization that is not viable via the use of NavigationSuiteScaffold. Example usage:

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuite
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldLayout
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var selectedItem by remember { mutableIntStateOf(0) }
val navItems = listOf("Songs", "Artists", "Playlists")
val navSuiteType =
    NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(currentWindowAdaptiveInfo())

NavigationSuiteScaffoldLayout(
    navigationSuite = {
        // Custom Navigation Rail with centered items.
        if (navSuiteType == NavigationSuiteType.NavigationRail) {
            NavigationRail {
                // Adding Spacers before and after the item so they are pushed towards the
                // center of the NavigationRail.
                Spacer(Modifier.weight(1f))
                navItems.forEachIndexed { index, item ->
                    NavigationRailItem(
                        icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
                Spacer(Modifier.weight(1f))
            }
        } else {
            NavigationSuite {
                navItems.forEachIndexed { index, item ->
                    item(
                        icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
            }
        }
    }
) {
    // Screen content.
    Text(
        modifier = Modifier.padding(16.dp),
        text = "Current NavigationSuiteType: $navSuiteType"
    )
}

Parameters
`navigationSuite: @Composable () -> Unit`	the navigation component to be displayed, typically `NavigationSuite`
`layoutType: NavigationSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(WindowAdaptiveInfoDefault)`	the current `NavigationSuiteType`. Defaults to `NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo`
`content: @Composable () -> Unit = {}`	the content of your screen