Criar um menu deslizante com o componente da gaveta de navegação
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O componente da gaveta de navegação é um menu deslizante que permite que os usuários naveguem
por várias seções do app. Os usuários podem ativar esse recurso deslizando para o lado
ou tocando em um ícone de menu.
Considere estes três casos de uso para implementar uma gaveta de navegação:
- Organização de conteúdo:permita que os usuários alternem entre diferentes
categorias, como em apps de notícias ou blogs.
- Gerenciamento da conta:ofereça links rápidos para as configurações da conta e as seções
do perfil em apps com contas de usuário.
- Descoberta de recursos:organize vários recursos e configurações em um único
menu para facilitar a descoberta e o acesso do usuário em apps complexos.
No Material Design, há dois tipos de gavetas de navegação:
- Padrão:compartilha espaço em uma tela com outro conteúdo.
- Modal:aparece sobre outros conteúdos em uma tela.
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou
mais recente.
Dependências
Implementar uma gaveta de navegação
Você pode usar o elemento combinável ModalNavigationDrawer para implementar uma
gaveta de navegação:
Pontos principais
Use o slot drawerContent para fornecer um ModalDrawerSheet e
o conteúdo da gaveta.
ModalNavigationDrawer aceita vários outros parâmetros de gaveta.
Por exemplo, é possível ativar ou desativar a resposta da gaveta às ações de arrastar com
o parâmetro gesturesEnabled, como no exemplo abaixo:
Controlar o comportamento da gaveta de navegação
Para controlar como a gaveta é aberta e fechada, use DrawerState:
Pontos principais
- Transmita um
DrawerState para ModalNavigationDrawer usando o parâmetro
drawerState.
DrawerState fornece acesso às funções open e close,
além de propriedades relacionadas ao estado atual da gaveta. Essas funções de suspensão
exigem um CoroutineScope, que pode ser instanciado usando
rememberCoroutineScope. Também é possível chamar as funções de suspensão em
resposta a eventos da interface.
Resultados
Figura 1. Uma gaveta de navegação padrão (à esquerda) e uma gaveta de navegação modal (à direita).
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem
metas mais amplas de desenvolvimento para Android:
Mostrar componentes interativos
Aprenda como as funções combináveis podem permitir que você crie
componentes de interface bonitos com base no sistema de design
do Material Design.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-02-06 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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)"]]
