Membuat menu geser dengan komponen panel navigasi
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Komponen panel navigasi adalah menu geser yang memungkinkan pengguna menavigasi
ke berbagai bagian aplikasi Anda. Pengguna dapat mengaktifkannya dengan menggeser dari samping
atau mengetuk ikon menu.
Pertimbangkan tiga kasus penggunaan berikut untuk menerapkan panel navigasi:
- Pengaturan konten: Memungkinkan pengguna beralih antar-kategori
yang berbeda, seperti di aplikasi berita atau blog.
- Pengelolaan akun: Memberikan link cepat ke setelan akun dan bagian
profil di aplikasi dengan akun pengguna.
- Penemuan fitur: Mengatur beberapa fitur dan setelan dalam satu
menu untuk memfasilitasi penemuan dan akses pengguna di aplikasi yang kompleks.
Dalam Desain Material, ada dua jenis panel navigasi:
- Standar: Membagikan ruang dalam layar dengan konten lain.
- Modal: Muncul di atas konten lain dalam layar.
Kompatibilitas versi
Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau
yang lebih tinggi.
Dependensi
Mengimplementasikan panel navigasi
Anda dapat menggunakan composable ModalNavigationDrawer untuk mengimplementasikan
panel navigasi:
Poin utama
Gunakan slot drawerContent untuk menyediakan ModalDrawerSheet dan
menyediakan konten panel samping.
ModalNavigationDrawer menerima sejumlah parameter panel samping tambahan.
Misalnya, Anda dapat beralih apakah panel samping merespons tarik dengan
parameter gesturesEnabled seperti dalam contoh berikut:
Mengontrol perilaku panel navigasi
Untuk mengontrol cara panel samping dibuka dan ditutup, gunakan DrawerState:
Poin utama
- Teruskan
DrawerState ke ModalNavigationDrawer menggunakan parameter
drawerState.
DrawerState memberikan akses ke fungsi open dan close,
serta properti yang terkait dengan status panel samping saat ini. Fungsi penangguhan ini
memerlukan CoroutineScope, yang dapat Anda buat instance-nya menggunakan
rememberCoroutineScope. Anda juga dapat memanggil fungsi penangguhan sebagai respons terhadap peristiwa UI.
Hasil
Gambar 1. Panel navigasi standar (kiri) dan panel navigasi modal (kanan).
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas
sasaran pengembangan Android yang lebih luas:
Menampilkan komponen interaktif
Pelajari cara fungsi composable dapat memudahkan Anda
membuat komponen UI yang menarik berdasarkan sistem desain
Desain Material.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-02-06 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-02-06 UTC."],[],[],null,["# Create a slide-in menu with the navigation drawer component\n\n\u003cbr /\u003e\n\nThe [navigation drawer](https://material.io/components/navigation-drawer) component is a slide-in menu that lets users navigate\nto various sections of your app. Users can activate it by swiping from the side\nor tapping a menu icon.\n\nConsider these three use cases for implementing a navigation drawer:\n\n- **Content organization:** Enable users to switch between different categories, such as in news or blogging apps.\n- **Account management:** Provide quick links to account settings and profile sections in apps with user accounts.\n- **Feature discovery:** Organize multiple features and settings in a single menu to facilitate user discovery and access in complex apps.\n\nIn Material Design, there are two types of navigation drawers:\n\n- **Standard:** Share space within a screen with other content.\n- **Modal:** Appears over the top of other content within a screen.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nImplement a navigation drawer\n-----------------------------\n\nYou can use the [`ModalNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlin.Function0)) composable to implement a\nnavigation drawer:\n\n\u003cbr /\u003e\n\n```kotlin\nModalNavigationDrawer(\n drawerContent = {\n ModalDrawerSheet {\n Text(\"Drawer title\", modifier = Modifier.padding(16.dp))\n HorizontalDivider()\n NavigationDrawerItem(\n label = { Text(text = \"Drawer Item\") },\n selected = false,\n onClick = { /*TODO*/ }\n )\n // ...other drawer items\n }\n }\n) {\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L290-L305\n \n```\n\n\u003cbr /\u003e\n\n### Key points\n\n- Use the `drawerContent` slot to provide a [`ModalDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) and\n provide the drawer's contents.\n\n- `ModalNavigationDrawer` accepts a number of additional drawer parameters.\n For example, you can toggle whether or not the drawer responds to drags with\n the `gesturesEnabled` parameter as in the following example:\n\n \u003cbr /\u003e\n\n ```kotlin\n ModalNavigationDrawer(\n drawerContent = {\n ModalDrawerSheet {\n // Drawer contents\n }\n },\n gesturesEnabled = false\n ) {\n // Screen content\n }\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L312-L321\n \n ```\n\n \u003cbr /\u003e\n\nControl navigation drawer behavior\n----------------------------------\n\nTo control how the drawer opens and closes, use [`DrawerState`](/reference/kotlin/androidx/compose/material3/DrawerState):\n\n\u003cbr /\u003e\n\n```kotlin\nval drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)\nval scope = rememberCoroutineScope()\nModalNavigationDrawer(\n drawerState = drawerState,\n drawerContent = {\n ModalDrawerSheet { /* Drawer content */ }\n },\n) {\n Scaffold(\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show drawer\") },\n icon = { Icon(Icons.Filled.Add, contentDescription = \"\") },\n onClick = {\n scope.launch {\n drawerState.apply {\n if (isClosed) open() else close()\n }\n }\n }\n )\n }\n ) { contentPadding -\u003e\n // Screen content\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L328-L356\n \n```\n\n\u003cbr /\u003e\n\n### Key points\n\n- Pass a `DrawerState` to `ModalNavigationDrawer` using the `drawerState` parameter.\n- `DrawerState` provides access to the [`open`](/reference/kotlin/androidx/compose/material3/DrawerState#open) and [`close`](/reference/kotlin/androidx/compose/material3/DrawerState#close) functions, as well as properties related to the current drawer state. These suspending functions require a `CoroutineScope`, which you can instantiate using [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope). You can also call the suspending functions in response to UI events.\n\nResults\n-------\n\n\n**Figure 1.** A standard navigation drawer (left) and a modal navigation drawer (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
