Material Design 3 Standard Component
Refer to the Material 3 Navigation Drawer guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics.
[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Horizon theme with a Tonal option to create your own designs. [/internal_only]
Intro
The navigation drawer provides access to different destinations in an app.
Navigation drawers can be permanently visible or opened and closed by tapping a menu icon.
Modal navigation drawer (left) and standard navigation drawer (right)
Usage
Do
Use the navigation drawer for five or more destinations.
Don't
Don’t use the navigation drawer for fewer than five destinations on compact screens, use the navigation bar instead.
- Use a modal navigation drawer primarily on compact screens.
- Use a modal navigation drawer in combination with the navigation rail when
there are multiple destinations. - Use a standard navigation drawer on larger screens.
- Use a standard navigation drawer, or a navigation rail that transitions into a modal navigation drawer for large and extra-large window sizes.
- Display the most frequent destinations at the top and group related destinations together
- Keep the title of destinations short and concise.
- Try to avoid wrapping text into more than two lines.
- Don’t truncate or shrink text.
Anatomy
A. Container
The container includes all destinations including icons, labels, active indicator, and an optional profile.
B. Profile/Avatar/Initials (Optional)
We recommend using an image so that the user can quickly identify the person the profile belongs to. Images of people should always be in a circle.
C. Name Text (Optional)
The name must include the first and last name of the person.
D. Details Text (Optional)
The details text is optional and can contain secondary information about the person, such as their job title or location.
E. Headline (Optional)
The headline can be used for a parent heading.
F. Section Header
The section header can be used to group related destinations.
G. Icon (Optional)
Meaningful icons visualize the app destinations. Use filled icons for the selected destinations and unfilled icons for unselected destinations.
H. Active Indicator
The active indicator highlights the selected destination.
I. Label Text
The label text provides a short and concise description of the destination.
J. Badge Value (Optional)
The badge value shows a number for status changes.
K. Divider (Optional)
The divider allows to create related groups of destinations.
L. Scrim (Only Available for Modal Navigation Drawer)
The scrim prevents the interaction with the rest of the app content and is displayed behind the modal navigation drawer.
Navigation drawer anatomy
Behavior and Interaction
The navigation drawer is placed on the edge of the screen. On the left side for left-to-right languages and on the right side for right-to-left languages.
When users tap on a destination, they are directed to the navigation destination. The selected destination is visually highlighted with the active indicator and a filled icon.
Selecting another navigation destination in the modal navigation drawer
Horizontal scrolling in the standard navigation drawer
Variations
Modal Navigation Drawer
The modal navigation drawer has a scrim to prevent interaction with the app content. It is mainly used on compact screens.
Users can open the modal navigation drawer by tapping the menu icon.
To close the modal navigation drawer, they select a destination, tap on the scrim, or swipe to the drawer’s anchoring edge. If there is a “Back” button on the navigation bar, they can also close the drawer with this button.
Opening and closing the modal navigation drawer
The modal navigation drawer can be used in combination with the navigation rail when
there are multiple destinations. Secondary, tertiary, etc., navigation targets are also displayed in the modal drawer because the space in the rail is limited. We recommend placing primary destination in the rail for a smooth transition to a navigation bar on compact size.
The modal navigation drawer repeats the navigation destinations from the navigation rail and can include additional navigation destinations, such as
secondary destinations or settings. The user can open and close the modal
navigation drawer by tapping the menu icon or tapped on the scrim next to the drawer’s sheet to dismiss it.
Combination of a navigation rail with a navigation drawer
Standard Navigation Drawer
The standard navigation drawer is positioned next to the app’s content and can be permanently on screen, which is best used when users frequently have to switch between destinations. If the app content should be the primary focus, users can close and open the standard navigation drawer by tapping a menu icon.
The standard navigation drawer is designed for large and extra-large window size classes. For compact and medium breakpoints, we recommend using the navigation bar and rail paired with the modal navigation drawer.
Standard navigation drawer on large and extra-large screen sizes
Adaptive Design
On compact screens, it is best to use a modal navigation drawer.
For medium and expanded breakpoints, it is best to use a rail and if there are more navigation targets, the rail transforms to a modal drawer by clicking the menu.
For window sizes wider than 1200dp, the permanently visible standard navigation drawer, or a navigation rail that expands into a modal navigation drawer are recommended.
Resources
Development: FioriNavigationDrawer
SAP Fiori for iOS: Sidebar
Material Design: Navigation Drawer