Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Si tu app contiene varios destinos para que los usuarios recorran, te recomendamos que emplees combinaciones de diseño y navegación que otras apps suelen usar.
Dado que muchos usuarios ya poseen los modelos mentales para estas combinaciones, tu app les resultará más intuitiva.
Combinaciones de diseño y navegación
La barra de navegación y el panel lateral de navegación modal se usan como patrones de navegación principales para las vistas de diseño principal y los destinos de navegación principales.
La barra de navegación puede contener entre tres y cinco destinos de navegación en el mismo nivel de jerarquía. Este componente se traduce en el riel de navegación para pantallas grandes.
Si bien el panel lateral de navegación puede contener más de cinco destinos de navegación, el patrón no es tan ideal como la barra de navegación.
Esto se debe a la necesidad de alcanzar la barra superior en tamaños compactos.
Las pestañas de Material 3 y la barra de la app inferior son patrones de navegación secundarios que puedes usar para complementar la navegación principal o aparecer en vistas secundarias.
Aquí, las pestañas actúan como una capa de navegación secundaria para agrupar el contenido secundario.
Acciones de diseño
Proporciona controles para que los usuarios puedan realizar acciones. Entre los patrones comunes, se incluyen las acciones de la barra superior, el botón de acción flotante (BAF) y los menús.
Para las acciones de mayor importancia, un BAF proporciona un botón grande y prominente para el usuario. Proporciona solo una acción a la vez en este nivel. Los FAB pueden aparecer en varios tamaños y en una forma expandida, que incluye una etiqueta. Usa Scaffold para fijar un FAB y asegurarte de que siempre esté visible, incluso cuando se desplace.
Un botón de acción flotante (BAF) que permite al usuario agregar rápidamente plantas a la galería de plantas
Puedes colocar acciones secundarias en la barra superior o, si están agrupadas cerca de contenido relacionado, dentro de la página.
Figura 20: Acción de alerta en la barra superior en la opción Mostrar detalles
(izquierda) y el ícono de desbordamiento intercalado en el elemento de lista (derecha)
Para cualquier acción adicional que no se necesite de inmediato o con frecuencia, agrégala en un menú ampliado.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-08-28 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-08-28 (UTC)"],[],[],null,["If your app contains multiple destinations for users to traverse, we recommend\nemploying layout and navigation pairings that are commonly used by other apps.\nBecause many users already possess the mental models for these pairings, your\napp will be more intuitive for them.\n\nLayout and navigation pairings\n\nThe navigation bar and modal navigation drawer are used as primary navigation\npatterns for parent layout views and primary navigation destinations. \n\nThe navigation bar can hold three to five navigation destinations across the\nsame hierarchy level. This component translates to the navigation rail for large\nscreens.\n\n\nAlthough the navigation drawer can hold more than five navigation destinations,\nthe pattern is not as ideal as the navigation bar.\nThis is due to the need to reach to the top bar on compact sizes. \n\n[Material 3 Tabs](https://m3.material.io/components/tabs/overview) and the [bottom app bar](https://m3.material.io/components/bottom-app-bar/overview) are\nsecondary navigation patterns that you can can use to supplement primary\nnavigation or appear on children views.\n\n\nHere, tabs act as a secondary navigation layer to group sibling content.\n\nLayout actions\n\nProvide controls to enable users to accomplish actions. Common patterns include\ntop bar actions, floating action button (FAB), and menus. \n\nFor actions of the highest importance, a [FAB](https://m3.material.io/components/floating-action-button/overview) provides a large\nand prominent button for the user. Provide only one action at a time at this\nlevel. A FAB can appear in multiple sizes and an expanded form, which includes a\nlabel. Use [Scaffold](/jetpack/compose/components/scaffold) to pin a FAB, making sure it's always\nvisible even on scroll by.\n\n\nA floating action button (FAB) that allows the\nuser to quickly add plants to the plant gallery\n\nYou can place secondary actions within the top bar or, if it's grouped near\nrelated content, within the page.\n**Figure 20:** Alert action in the top bar on show detail (left) and overflow icon inline of list item (right)\n\nFor any additional actions that aren't promptly or frequently needed, add those\nactions in an overflow menu."]]
