androidx.compose.material3.adaptive.navigationsuite

Common/All

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

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