Stay organized with collections
Save and categorize content based on your preferences.
If your app contains multiple destinations for users to traverse, we recommend
employing layout and navigation pairings that are commonly used by other apps.
Because many users already possess the mental models for these pairings, your
app will be more intuitive for them.
Layout and navigation pairings
The navigation bar and modal navigation drawer are used as primary navigation
patterns for parent layout views and primary navigation destinations.
The navigation bar can hold three to five navigation destinations across the
same hierarchy level. This component translates to the navigation rail for large
screens.
Although the navigation drawer can hold more than five navigation destinations,
the pattern is not as ideal as the navigation bar.
This is due to the need to reach to the top bar on compact sizes.
Material 3 Tabs and the bottom app bar are
secondary navigation patterns that you can can use to supplement primary
navigation or appear on children views.
Here, tabs act as a secondary navigation layer to group sibling content.
Layout actions
Provide controls to enable users to accomplish actions. Common patterns include
top bar actions, floating action button (FAB), and menus.
For actions of the highest importance, a FAB provides a large
and prominent button for the user. Provide only one action at a time at this
level. A FAB can appear in multiple sizes and an expanded form, which includes a
label. Use Scaffold to pin a FAB, making sure it's always
visible even on scroll by.
A floating action button (FAB) that allows the
user to quickly add plants to the plant gallery
You can place secondary actions within the top bar or, if it's grouped near
related content, within the page.
Figure 20: Alert action in the top bar on show detail
(left) and overflow icon inline of list item (right)
For any additional actions that aren't promptly or frequently needed, add those
actions in an overflow menu.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-08-28 UTC.
[null,null,["Last updated 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."]]
