이 가이드에서는 상단 앱 바의 탐색 아이콘이 탐색 작업을 실행하도록 하는 방법을 보여줍니다.
예
다음 스니펫은 기능적 탐색 아이콘이 있는 상단 앱 바로 구현하는 최소한의 예입니다. 이 경우 아이콘을 클릭하면 사용자가 앱에서 이전에 방문한 대상으로 이동합니다.
@ComposablefunTopBarNavigationExample(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),)}}
NavHost(navController,startDestination="home"){composable("topBarNavigationExample"){TopBarNavigationExample{navController.popBackStack()}}// Other destinations...
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-23(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-23(UTC)"],[],[],null,["This guide demonstrates how you can make the navigation icon in a [top app\nbar](https://m3.material.io/components/top-app-bar/overview) perform navigation actions.\n| **Note:** The example on this page uses `CenterAlignedTopAppBar`, but this is applicable to any app bar component with a `NavigationIcon` parameter.\n\nExample\n\nThe following snippet is a minimal example of how you can implement a top app\nbar with a functional navigation icon. In this case, the icon takes the user to\ntheir previous destination in the app:\n\n\n```kotlin\n@Composable\nfun TopBarNavigationExample(\n navigateBack: () -\u003e Unit,\n) {\n Scaffold(\n topBar = {\n CenterAlignedTopAppBar(\n title = {\n Text(\n \"Navigation example\",\n )\n },\n navigationIcon = {\n IconButton(onClick = navigateBack) {\n Icon(\n imageVector = Icons.AutoMirrored.Filled.ArrowBack,\n contentDescription = \"Localized description\"\n )\n }\n },\n )\n },\n ) { innerPadding -\u003e\n Text(\n \"Click the back button to pop from the back stack.\",\n modifier = Modifier.padding(innerPadding),\n )\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt#L353-L381\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\nNote the following in this example:\n\n- The composable `TopBarNavigationExample` defines a parameter `navigateBack` of type `() -\u003e Unit`.\n- It passes `navigateBack` for the `navigationIcon` parameter of `CenterAlignedTopAppBar`.\n\nAs such, whenever the user clicks the navigation icon in the top app back, it\ncalls `navigateBack()`.\n\nPass a function\n\nThis example uses a back arrow for the icon. As such, the argument for\n`navigateBack()` should take the user to the previous destination.\n\nTo do so, pass `TopBarNavigationExample` a call to\n[`NavController.popBackStack()`](/guide/navigation/backstack). You do this where you [build your\nnavigation](/guide/navigation/design#compose) graph. For example: \n\n NavHost(navController, startDestination = \"home\") {\n composable(\"topBarNavigationExample\") {\n TopBarNavigationExample{ navController.popBackStack() }\n }\n // Other destinations...\n\n| **Note:** Using the same approach, you could implement a different action for the navigation icon. For example, you could use a house icon and pass a call to `navController.navigate(\"home\")`.\n\nAdditional resources\n\nFor more information on how to implement navigation in your app, see the\nfollowing series of guides:\n\n- [Navigation with Compose](/develop/ui/compose/navigation)\n- [Create a NavController](/develop/ui/compose/navigation#navcontroller)\n- [Design your navigation graph](/guide/navigation/design#compose)\n- [Navigate to a composable](/develop/ui/compose/navigation#nav-to-composable)"]]