This guide demonstrates how you can make the navigation icon in a top app bar perform navigation actions.
Example
The following snippet is a minimal example of how you can implement a top app bar with a functional navigation icon. In this case, the icon takes the user to their previous destination in the app:
@Composable fun TopBarNavigationExample( navigateBack: () -> Unit, ) { Scaffold( topBar = { CenterAlignedTopAppBar( title = { Text( "Navigation example", ) }, navigationIcon = { IconButton(onClick = navigateBack) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, ) }, ) { innerPadding -> Text( "Click the back button to pop from the back stack.", modifier = Modifier.padding(innerPadding), ) } }
Key points about the code
Note the following in this example:
- The composable
TopBarNavigationExample
defines a parameternavigateBack
of type() -> Unit
. - It passes
navigateBack
for thenavigationIcon
parameter ofCenterAlignedTopAppBar
.
As such, whenever the user clicks the navigation icon in the top app back, it
calls navigateBack()
.
Pass a function
This example uses a back arrow for the icon. As such, the argument for
navigateBack()
should take the user to the previous destination.
To do so, pass TopBarNavigationExample
a call to
NavController.popBackStack()
. You do this where you build your
navigation graph. For example:
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
Additional resources
For more information on how to implement navigation in your app, see the following series of guides:
- Navigation with Compose
- Create a NavController
- Design your navigation graph
- Navigate to a composable