← Compose Multiplatform Component in Navigation Compose

NavHost

Android

Provides a place in the Compose hierarchy for self contained navigation to occur.

Once this is called, any Composable within the given [NavGraphBuilder] can be navigated to from the provided [navController].

The builder passed into this method is [remember]ed. This means that for this NavHost, the contents of the builder cannot be changed.

Last updated: July 4, 2024 at 15:09 GMT+3

Installation

dependencies {
   implementation("androidx.navigation:navigation-compose:2.8.0-beta04")
}

Overloads

@Composable
@Deprecated(
    message = "Deprecated in favor of NavHost that supports AnimatedContent",
    level = DeprecationLevel.HIDDEN

fun NavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    route: String? = null,
    builder: NavGraphBuilder.() -> Unit
)

Parameters

name	description
`navController`	the navController for this host
`startDestination`	the route for the start destination
`modifier`	The modifier to be applied to the layout.
`route`	the route for the graph
`builder`	the builder used to construct the graph

@Composable
@Deprecated(
    message = "Deprecated in favor of NavHost that supports sizeTransform",
    level = DeprecationLevel.HIDDEN

fun NavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    route: String? = null,
    enterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) = {
        fadeIn(animationSpec = tween(700))
    },
    exitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) = {
        fadeOut(animationSpec = tween(700))
    },
    popEnterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
    builder: NavGraphBuilder.() -> Unit
)

Parameters

name	description
`navController`	the navController for this host
`startDestination`	the route for the start destination
`modifier`	The modifier to be applied to the layout.
`contentAlignment`	The [Alignment] of the [AnimatedContent]
`route`	the route for the graph
`enterTransition`	callback to define enter transitions for destination in this host
`exitTransition`	callback to define exit transitions for destination in this host
`popEnterTransition`	callback to define popEnter transitions for destination in this host
`popExitTransition`	callback to define popExit transitions for destination in this host
`builder`	the builder used to construct the graph

@Composable
fun NavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    route: String? = null,
    enterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        {
            fadeIn(animationSpec = tween(700))
        },
    exitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        {
            fadeOut(animationSpec = tween(700))
        },
    popEnterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
    sizeTransform:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> SizeTransform?)? =
        null,
    builder: NavGraphBuilder.() -> Unit
)

Parameters

name	description
`navController`	the navController for this host
`startDestination`	the route for the start destination
`modifier`	The modifier to be applied to the layout.
`contentAlignment`	The [Alignment] of the [AnimatedContent]
`route`	the route for the graph
`enterTransition`	callback to define enter transitions for destination in this host
`exitTransition`	callback to define exit transitions for destination in this host
`popEnterTransition`	callback to define popEnter transitions for destination in this host
`popExitTransition`	callback to define popExit transitions for destination in this host
`sizeTransform`	callback to define the size transform for destinations in this host
`builder`	the builder used to construct the graph

@Composable
fun NavHost(
    navController: NavHostController,
    startDestination: KClass<*>,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    route: KClass<*>? = null,
    typeMap: Map<KType, @JvmSuppressWildcards NavType<*>> = emptyMap(),
    enterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        {
            fadeIn(animationSpec = tween(700))
        },
    exitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        {
            fadeOut(animationSpec = tween(700))
        },
    popEnterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
    sizeTransform:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> SizeTransform?)? =
        null,
    builder: NavGraphBuilder.() -> Unit
)

Parameters

name	description
`navController`	the navController for this host
`startDestination`	the route from a [KClass] for the start destination
`modifier`	The modifier to be applied to the layout.
`contentAlignment`	The [Alignment] of the [AnimatedContent]
`route`	the route from a [KClass] for the graph
`typeMap`	map of destination arguments' kotlin type [KType] to its respective custom [NavType]. May be empty if [route] does not use custom NavTypes.
`enterTransition`	callback to define enter transitions for destination in this host
`exitTransition`	callback to define exit transitions for destination in this host
`popEnterTransition`	callback to define popEnter transitions for destination in this host
`popExitTransition`	callback to define popExit transitions for destination in this host
`sizeTransform`	callback to define the size transform for destinations in this host
`builder`	the builder used to construct the graph

@Composable
fun NavHost(
    navController: NavHostController,
    startDestination: Any,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    route: KClass<*>? = null,
    typeMap: Map<KType, @JvmSuppressWildcards NavType<*>> = emptyMap(),
    enterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        {
            fadeIn(animationSpec = tween(700))
        },
    exitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        {
            fadeOut(animationSpec = tween(700))
        },
    popEnterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
    sizeTransform:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> SizeTransform?)? =
        null,
    builder: NavGraphBuilder.() -> Unit
)

Parameters

name	description
`navController`	the navController for this host
`startDestination`	the route from a an Object for the start destination
`modifier`	The modifier to be applied to the layout.
`contentAlignment`	The [Alignment] of the [AnimatedContent]
`route`	the route from a [KClass] for the graph
`typeMap`	map of destination arguments' kotlin type [KType] to its respective custom [NavType]. May be empty if [route] does not use custom NavTypes.
`enterTransition`	callback to define enter transitions for destination in this host
`exitTransition`	callback to define exit transitions for destination in this host
`popEnterTransition`	callback to define popEnter transitions for destination in this host
`popExitTransition`	callback to define popExit transitions for destination in this host
`sizeTransform`	callback to define the size transform for destinations in this host
`builder`	the builder used to construct the graph

@Composable
@Deprecated(
    message = "Deprecated in favor of NavHost that supports AnimatedContent",
    level = DeprecationLevel.HIDDEN

fun NavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier
)

Parameters

name	description
`navController`	the navController for this host
`graph`	the graph for this host
`modifier`	The modifier to be applied to the layout.

@Composable
@SuppressLint("StateFlowValueCalledInComposition"
@Deprecated(
    message = "Deprecated in favor of NavHost that supports sizeTransform",
    level = DeprecationLevel.HIDDEN

fun NavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    enterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) = {
        fadeIn(animationSpec = tween(700))
    },
    exitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) = {
        fadeOut(animationSpec = tween(700))
    },
    popEnterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
)

Parameters

name	description
`navController`	the navController for this host
`graph`	the graph for this host
`modifier`	The modifier to be applied to the layout.
`contentAlignment`	The [Alignment] of the [AnimatedContent]
`enterTransition`	callback to define enter transitions for destination in this host
`exitTransition`	callback to define exit transitions for destination in this host
`popEnterTransition`	callback to define popEnter transitions for destination in this host
`popExitTransition`	callback to define popExit transitions for destination in this host

@Composable
@SuppressLint("StateFlowValueCalledInComposition"
fun NavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    enterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        {
            fadeIn(animationSpec = tween(700))
        },
    exitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        {
            fadeOut(animationSpec = tween(700))
        },
    popEnterTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
    sizeTransform:
        (@JvmSuppressWildcards
        AnimatedContentTransitionScope<NavBackStackEntry>.() -> SizeTransform?)? =
        null
)

Parameters

name	description
`navController`	the navController for this host
`graph`	the graph for this host
`modifier`	The modifier to be applied to the layout.
`contentAlignment`	The [Alignment] of the [AnimatedContent]
`enterTransition`	callback to define enter transitions for destination in this host
`exitTransition`	callback to define exit transitions for destination in this host
`popEnterTransition`	callback to define popEnter transitions for destination in this host
`popExitTransition`	callback to define popExit transitions for destination in this host
`sizeTransform`	callback to define the size transform for destinations in this host

Code Example

NavScaffold

@Composable
@Sampled
fun NavScaffold() {
    val navController = rememberNavController()
    Scaffold { innerPadding ->
        NavHost(navController, Profile, Modifier.padding(innerPadding)) {
            composable<Profile> { Profile(navController) }
            composable<Dashboard> { Dashboard(navController) }
            composable<Scrollable> { Scrollable(navController) }
            dialog<Dialog> { DialogContent(navController) }
        }
    }
}

Foundational Libraries

Compose UI

Foundation

Foundation Layout

Animation

Component Libraries

Material 3 Compose

Material Compose

Wear Material 3 Compose

Wear Material Compose

Jetpack Glance

Glance Wear Tiles

Tv Foundation

Tv Material Compose

Other Libraries

Navigation Compose

NavHost

Installation

Overloads

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Code Example

NavScaffold