xref: /aosp_15_r20/external/accompanist/docs/navigation-material.md (revision fa44fe6ae8e729aa3cfe5c03eedbbf98fb44e2c6) 
1# Jetpack Navigation Compose Material
2
3[![Maven Central](https://img.shields.io/maven-central/v/com.google.accompanist/accompanist-navigation-material)](https://search.maven.org/search?q=g:com.google.accompanist)
4
5A library which provides [Compose Material](https://developer.android.com/jetpack/androidx/releases/compose-material) support for [Jetpack Navigation Compose](https://developer.android.com/jetpack/compose/navigation).
6This features composable bottom sheet destinations.
7
8!!! warning
9    The navigation APIs are currently experimental and they could change at any time.
10    All of the APIs are marked with the `@ExperimentalMaterialNavigationApi` annotation.
11
12## Usage
13
14### Bottom Sheet Destinations
15
161. Create a `BottomSheetNavigator` and add it to the `NavController`:
17
18    ```kotlin
19    @Composable
20    fun MyApp() {
21        val bottomSheetNavigator = rememberBottomSheetNavigator()
22        val navController = rememberNavController(bottomSheetNavigator)
23    }
24    ```
25
262. Wrap your `NavHost` in the `ModalBottomSheetLayout` composable that accepts a `BottomSheetNavigator`.
27
28    ```kotlin
29    @Composable
30    fun MyApp() {
31        val bottomSheetNavigator = rememberBottomSheetNavigator()
32        val navController = rememberNavController(bottomSheetNavigator)
33        ModalBottomSheetLayout(bottomSheetNavigator) {
34            NavHost(navController, "home") {
35               // We'll define our graph here in a bit!
36            }
37        }
38    }
39    ```
40
413. Register a bottom sheet destination
42
43    ```kotlin
44    @Composable
45    fun MyApp() {
46        val bottomSheetNavigator = rememberBottomSheetNavigator()
47        val navController = rememberNavController(bottomSheetNavigator)
48        ModalBottomSheetLayout(bottomSheetNavigator) {
49            NavHost(navController, "home") {
50               composable(route = "home") {
51                   ...
52               }
53               bottomSheet(route = "sheet") {
54                   Text("This is a cool bottom sheet!")
55               }
56            }
57        }
58    }
59    ```
60
61For more examples, refer to the [samples](https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/navigation/material).
62
63## Download
64
65[![Maven Central](https://img.shields.io/maven-central/v/com.google.accompanist/accompanist-navigation-material)](https://search.maven.org/search?q=g:com.google.accompanist)
66
67```groovy
68repositories {
69    mavenCentral()
70}
71
72dependencies {
73    implementation "com.google.accompanist:accompanist-navigation-material:<version>"
74}
75```
76
77Snapshots of the development version are available in [Sonatype's `snapshots` repository][snap]. These are updated on every commit.
78
79[compose]: https://developer.android.com/jetpack/compose
80[snap]: https://oss.sonatype.org/content/repositories/snapshots/com/google/accompanist/accompanist-navigation-material/
81