Créer un menu coulissant avec le composant panneau de navigation
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composant navigation drawer est un menu coulissant qui permet aux utilisateurs d'accéder à différentes sections de votre application. Ils peuvent l'activer en balayant l'écran depuis le côté ou en appuyant sur une icône de menu.
Voici trois cas d'utilisation d'un panneau de navigation:
- Organisation du contenu:permet aux utilisateurs de basculer entre différentes catégories, par exemple dans les applications d'actualités ou de blogs.
- Gestion de compte:fournissez des liens rapides vers les paramètres de compte et les sections de profil dans les applications avec des comptes utilisateur.
- Découverte des fonctionnalités:organisez plusieurs fonctionnalités et paramètres dans un seul menu pour faciliter la découverte et l'accès des utilisateurs dans les applications complexes.
Dans Material Design, il existe deux types de panneaux de navigation:
- Standard:partagez l'espace d'un écran avec d'autres contenus.
- Modal:s'affiche au-dessus d'autres contenus sur un écran.
Compatibilité des versions
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.
Dépendances
Implémenter un panneau de navigation
Vous pouvez utiliser le composable ModalNavigationDrawer pour implémenter un panneau de navigation:
Points essentiels
Utilisez l'emplacement drawerContent pour fournir un ModalDrawerSheet et le contenu du panneau.
ModalNavigationDrawer accepte un certain nombre de paramètres de panneau supplémentaires.
Par exemple, vous pouvez activer ou désactiver la réaction du panneau aux gestes de type glisser à l'aide du paramètre gesturesEnabled, comme dans l'exemple suivant:
Contrôler le comportement du panneau de navigation
Pour contrôler l'ouverture et la fermeture du panneau, utilisez DrawerState:
Points essentiels
- Transmettez un
DrawerState à ModalNavigationDrawer à l'aide du paramètre drawerState.
DrawerState fournit un accès aux fonctions open et close, ainsi qu'aux propriétés liées à l'état actuel du panneau. Ces fonctions de suspension nécessitent de définir leur CoroutineScope, que vous pouvez instancier à l'aide de rememberCoroutineScope. Vous pouvez également appeler les fonctions de suspension en réponse aux événements d'interface utilisateur.
Résultats
Figure 1 Panneau de navigation standard (à gauche) et panneau de navigation modal (à droite).
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Afficher des composants interactifs
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["\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\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a navigation drawer\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\nKey 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\nControl navigation drawer behavior\n\nTo control how the drawer opens and closes, use [`DrawerState`](/reference/kotlin/androidx/compose/material3/DrawerState):\n\nKey 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**Figure 1.** A standard navigation drawer (left) and a modal navigation drawer (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \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 \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)"]]
