New Compose Multiplatform components arrived on Composables UICheck it out →

NavHost

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:

Installation

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

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

namedescription
navControllerthe navController for this host
startDestinationthe route for the start destination
modifierThe modifier to be applied to the layout.
routethe route for the graph
builderthe 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

namedescription
navControllerthe navController for this host
startDestinationthe route for the start destination
modifierThe modifier to be applied to the layout.
contentAlignmentThe [Alignment] of the [AnimatedContent]
routethe route for the graph
enterTransitioncallback to define enter transitions for destination in this host
exitTransitioncallback to define exit transitions for destination in this host
popEnterTransitioncallback to define popEnter transitions for destination in this host
popExitTransitioncallback to define popExit transitions for destination in this host
builderthe 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

namedescription
navControllerthe navController for this host
startDestinationthe route for the start destination
modifierThe modifier to be applied to the layout.
contentAlignmentThe [Alignment] of the [AnimatedContent]
routethe route for the graph
enterTransitioncallback to define enter transitions for destination in this host
exitTransitioncallback to define exit transitions for destination in this host
popEnterTransitioncallback to define popEnter transitions for destination in this host
popExitTransitioncallback to define popExit transitions for destination in this host
sizeTransformcallback to define the size transform for destinations in this host
builderthe 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

namedescription
navControllerthe navController for this host
startDestinationthe route from a [KClass] for the start destination
modifierThe modifier to be applied to the layout.
contentAlignmentThe [Alignment] of the [AnimatedContent]
routethe route from a [KClass] for the graph
typeMapmap of destination arguments' kotlin type [KType] to its respective custom [NavType]. May be empty if [route] does not use custom NavTypes.
enterTransitioncallback to define enter transitions for destination in this host
exitTransitioncallback to define exit transitions for destination in this host
popEnterTransitioncallback to define popEnter transitions for destination in this host
popExitTransitioncallback to define popExit transitions for destination in this host
sizeTransformcallback to define the size transform for destinations in this host
builderthe 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

namedescription
navControllerthe navController for this host
startDestinationthe route from a an Object for the start destination
modifierThe modifier to be applied to the layout.
contentAlignmentThe [Alignment] of the [AnimatedContent]
routethe route from a [KClass] for the graph
typeMapmap of destination arguments' kotlin type [KType] to its respective custom [NavType]. May be empty if [route] does not use custom NavTypes.
enterTransitioncallback to define enter transitions for destination in this host
exitTransitioncallback to define exit transitions for destination in this host
popEnterTransitioncallback to define popEnter transitions for destination in this host
popExitTransitioncallback to define popExit transitions for destination in this host
sizeTransformcallback to define the size transform for destinations in this host
builderthe 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

namedescription
navControllerthe navController for this host
graphthe graph for this host
modifierThe 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

namedescription
navControllerthe navController for this host
graphthe graph for this host
modifierThe modifier to be applied to the layout.
contentAlignmentThe [Alignment] of the [AnimatedContent]
enterTransitioncallback to define enter transitions for destination in this host
exitTransitioncallback to define exit transitions for destination in this host
popEnterTransitioncallback to define popEnter transitions for destination in this host
popExitTransitioncallback 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

namedescription
navControllerthe navController for this host
graphthe graph for this host
modifierThe modifier to be applied to the layout.
contentAlignmentThe [Alignment] of the [AnimatedContent]
enterTransitioncallback to define enter transitions for destination in this host
exitTransitioncallback to define exit transitions for destination in this host
popEnterTransitioncallback to define popEnter transitions for destination in this host
popExitTransitioncallback to define popExit transitions for destination in this host
sizeTransformcallback to define the size transform for destinations in this host

Code Example

@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) }
        }
    }
}