Navigation drawer
Collapsible navigation panels that float over page content on small screens.
The navigation drawer is a vertical navigation menu used on mobile devices or small web screens. It’s typically accessed from a menu icon in the Top app bar.
Also known as: Drawer menu, side menu, flyout menu, sidebar navigation, hamburger menu, collapsible menu, Navigation Drawer (Android).
Anatomy
A. Brand mark (optional): Visual element representing Visa, a partner brand, or a fictitious brand associated with the product.
B. Application name (optional): Label indicating the name of the application.
C. Section title (optional): Title used to group navigation elements.
D. Icon (optional): Visual indicator used to enhance the meaning of the navigation link label.
E. Navigation link (required): Label indicating the destination of the link.
F. User profile (optional): Avatar component representing the current user’s account.
G. Close button (required): Icon button used to collapse the navigation drawer.
H. Chevron (optional): Icon indicating the collapsed or expanded state of a multi-level menu item.
Usage
| When to use | When not to use |
|---|---|
| For small screens with many navigation items. For navigation paired with a Top app bar. | If your app has a few top-level views, consider a Tab bar. For larger screen sizes. Use Vertical navigation instead. |
Best practices
- Reference Application layouts for help deciding which navigation component is best for your use case.
- Ensure the order of the navigation items is consistent throughout the application, as changing it may confuse users.
- Ensure text within the navigation panel wraps to a second line instead of truncating to ensure it’s fully visible to users.
- Include a vertical scroll bar if all navigation items can’t be viewed at once.
- Consider making the brand mark and/or application name function as a link to the homepage of the experience.
- Follow all guidance found in Avatar and Link for implementing a user profile in the navigation panel.
Do
Use a skrim overlay to indicate that the navigation drawer is floating over the page content.
Don't
Shift page content to fit the navigation drawer. If users need to access the page during navigation, use Vertical navigation.
Section titles and nesting
Section titles refer to static text used to group navigation items under a common category. They can be used with or without nested navigation items, which expand or collapse other navigation items. Both methods group related content and help users navigate easily. Decide which to use based on your use case and design preferences.
Section titles
Section titles group navigation items without nesting them. They’re helpful for grouping items that should always be visible within the menu.
- Use section titles to group items that should always be visible in the menu.
Nesting
Nesting items group links within collapsible sections. They’re helpful for more complex apps menus may benefit from limiting the number of links visible at once.
- Consider nesting items in longer navigation menus, as this can help save space and declutter the experience.
Do Nest items up to three levels of hierarchy to ensure users can access related content easily.
Don't Use more than three levels of hierarchy unless it can’t be avoided, as this can be overwhelming and hard to navigate.
Icon usage
Icons can be used in navigation drawers to make scanning easier and reinforce familiar ideas.
- Ensure icon usage applies to all navigation items within the same hierarchy level. For example, if you use icons for some L1 labels, they should be used in all L1 items.
- Omit icons for nested items, but if they’re necessary, ensure all items within the nested level has one.
Behaviors
Responsive web vs. native mobile applications
Navigation drawers can be used in both responsive web and native mobile applications. Whether its implemented in web or mobile determines the levels of hierarchy it can accommodate. Learn about the differences below.
Responsive web applications
In responsive web apps, navigation drawers include multiple levels of hierarchy to reflect the more complex navigation structure.
Native mobile applications
For native mobile apps, navigation drawers only have one level of links available. It’s expected that further navigation will be appear within sections of the app as needed.
Scrolling
A scroll bar can be used if the navigation is long and doesn’t fit in one view. The navigation items will scroll, while the brand mark, application name, and any items at the bottom remain fixed in position.
Chevron direction
Visually differentiate expanded and collapsed sections using the chevron direction.
Collapsed
Collapsed sections should use the downwards-pointing chevron to indicate collapsed content can be expanded.
Expanded
Expanded sections should use the upwards-pointing chevron to indicate expanded content can be collapsed.
Platform considerations
Navigation drawers are typically only used on small responsive screens, or in native mobile applications. For large screen sizes, use Horizontal navigation or Vertical navigation instead.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation for navigation items.
- Ensure labels match page titles to enhance the user’s understanding of the site’s information hierarchy.
- Limit labels to a few brief words to prevent unnecessary reflow.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
