Ein ausblendbares Menü mit der Komponente „Navigationsleiste“ erstellen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Komponente Navigationsleiste ist ein ausziehbares Menü, mit dem Nutzer verschiedene Bereiche Ihrer App aufrufen können. Sie wird aktiviert, indem Nutzer von der Seite wischen oder auf ein Menüsymbol tippen.
Hier sind drei Anwendungsfälle für die Implementierung einer Navigationsleiste:
- Inhaltsorganisation:Ermöglichen Sie Nutzern, zwischen verschiedenen Kategorien zu wechseln, z. B. in Nachrichten- oder Blogging-Apps.
- Kontoverwaltung:In Apps mit Nutzerkonten müssen Schnelllinks zu Kontoeinstellungen und Profilbereichen vorhanden sein.
- Funktionssuche:Ordnen Sie mehrere Funktionen und Einstellungen in einem einzigen Menü an, um Nutzern die Suche und den Zugriff in komplexen Apps zu erleichtern.
Im Material Design gibt es zwei Arten von Navigationsleisten:
- Standard:Der Bereich auf dem Bildschirm wird mit anderen Inhalten geteilt.
- Modal:Wird über anderen Inhalten auf einem Bildschirm angezeigt.
Versionskompatibilität
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Navigationsleiste implementieren
Mit dem ModalNavigationDrawer-Komponent können Sie eine Navigationsleiste implementieren:
Wichtige Fakten
Verwenden Sie den drawerContent-Slot, um ein ModalDrawerSheet und den Inhalt des Auszugs anzugeben.
Für ModalNavigationDrawer sind eine Reihe zusätzlicher Parameter für die Seitenleiste zulässig.
Mit dem Parameter gesturesEnabled können Sie beispielsweise festlegen, ob die Schublade auf Ziehen reagiert oder nicht, wie im folgenden Beispiel:
Verhalten der Navigationsleiste steuern
Mit DrawerState können Sie festlegen, wie die Schublade geöffnet und geschlossen wird:
Wichtige Fakten
- Übergeben Sie mit dem Parameter
drawerState eine DrawerState an ModalNavigationDrawer.
DrawerState bietet Zugriff auf die Funktionen open und close sowie auf Eigenschaften, die sich auf den aktuellen Schiebereglerstatus beziehen. Für diese Funktionen ist ein CoroutineScope erforderlich, das Sie mit rememberCoroutineScope instanziieren können. Sie können die Funktionen zum Pausieren auch als Reaktion auf UI-Ereignisse aufrufen.
Ergebnisse
Abbildung 1. Eine Standardnavigationsleiste (links) und eine modale Navigationsleiste (rechts).
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Interaktive Komponenten anzeigen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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)"]]
