Drawer

---

---

Anatomy

1. OS Safe area: Ensures drawer content respects device insets and system UI areas such as notches, status bars, and home indicators.
2. Header: Top area used for contextual information, navigation context, actions, or drawer controls.
1. Title: Primary text that communicates the current navigation context, workspace, or drawer purpose.
2. Actions: (Optional) Area for secondary controls such as close actions, settings shortcuts, or contextual utilities.
3. Content: Main scrollable container that holds drawer sections, navigation items, and complementary navigation content.
1. Drawer section: Groups related destinations or navigation items into meaningful categories to improve hierarchy and scanability.
1. Section header: (Optional) Helps identify and separate navigation groups within the drawer content.
2. Drawer item: Interactive navigation entry used to access destinations, views, or app sections.
1. Leading visual: (Optional) Supporting visual element such as an icon, avatar, or status indicator that improves recognition and navigation scanning.
2. Label: Primary text label describing the navigation destination or action.
3. Counter: (Optional) Supporting indicator used to communicate counts, unread items, notifications, or status updates.
3. Section divider: (Optional) Visual separator used to distinguish navigation groups and improve content organization.

---

Usage Guidelines

When to use this component

Use a drawer when

• The app contains multiple navigation sections.
• Navigation hierarchy cannot fit comfortably in the nav bar.
• Users need access to secondary areas of the app.
• The content structure is hierarchical or grouped.
• Navigation items require visual grouping into sections.
• The interface needs scalable navigation patterns for future growth.

When not to use this component

Avoid using a drawer for:

• Critical actions and confirmations. In that case, use the Alert dialog.
• Long forms or complex filters. Use the Bottom sheet instead.
• Primary or quick task flows.
• Contextual actions. Use the Toolbar in that case.

---

Best Practices

---

General Component Behaviors

The Drawer component is intended to support secondary and persistent navigation patterns in mobile experiences.

Unlike a BottomSheet, which is optimized for temporary tasks, actions, or contextual workflows, a drawer is primarily used for navigation and content organization.

In mobile design, drawers are commonly used to expose destinations, categories, account-related areas, or large hierarchical menus without interrupting the current screen.

Scroll

When the content exceeds the available height, the body should become scrollable, the header should remain fixed and safe areas must be respected for each operating system.

Navigation

Drawer items should trigger navigation or contextual actions. Only one item should be marked as active within the same navigation hierarchy.

Opening and closing

The drawer can open through explicit user actions or from navigation events. It would be closed when the user taps outside the drawer area or a navigation action is executed.

Section Grouping

Sections can help to organize related actions or destinations.

Badge Usage

Badges should communicate lightweight status information such as notification count, pending items, updates or status indicators.

---

Drawer item states

The items in the drawer have the following states:

• Default: Standard inactive item state.
• Active: Indicates current selected item.
• Pressed: Temporary interaction feedback.

---

Drawer item variants

Label only

Simplest navigation variant. Used for compact menus, minimal navigation or simple destination lists.

Leading visual

Adds a leading icon or visual indicator. Used for navigation recognition, faster visual scanning and brand or workspace identification.

Counter

Displays supporting metadata. Used for notification counts, status indicators, unread content or pending tasks.

Leading visual and Counter

Combines navigation iconography with supporting metadata.

---

Content Guidelines

The drawer should prioritize clarity, scanability, and navigation efficiency.

Because drawers often contain many destinations, content must remain concise and easy to parse visually.

Labels

Drawer item labels should:

• Be short and descriptive.
• Use familiar navigation terminology.
• Clearly communicate destination intent.
• Remain scannable at a glance.

Recommendations:

• Prefer 1–3 words when possible.
• Use sentence case.
• Avoid punctuation.
• Avoid ambiguous naming.
• Avoid long sentences.

Section headers

Section headers help organize large navigation structures.

Use them to:

• Group related destinations.
• Improve visual hierarchy.
• Reduce cognitive load.
• Support faster navigation scanning.

Recommendations:

• Keep headers concise.
• Avoid excessive sections.
• Use meaningful grouping.
• Avoid single-item sections when possible.

Badges and counters

Badges should communicate actionable or relevant information.

Recommendations:

• Keep values short.
• Avoid excessive counts.
• Avoid showing badges on every item.
• Prioritize meaningful updates.

Badge overuse reduces information hierarchy and increases cognitive load.

Navigation hierarchy

Drawer content should follow a clear hierarchy.

Recommendations:

• Place high-priority destinations near the top.
• Group related items together.
• Separate account/settings areas from primary navigation.
• Avoid excessive nesting.
• Keep hierarchy shallow.

Users should be able to:

• Understand the structure quickly.
• Predict where destinations belong.
• Navigate efficiently with minimal cognitive effort.

Content density

Avoid overcrowding the drawer.

Recommendations:

• Limit the number of visible items when possible.
• Use sections to chunk content.
• Avoid mixing navigation with unrelated actions.
• Preserve spacing between groups.
• Maintain comfortable touch targets.

If the navigation becomes too large:

• Introduce progressive disclosure.
• Reconsider information architecture.
• Evaluate whether search or tabs are more appropriate.

For further information, see the Content Styleguide.

---

Known Gaps

• Nested navigation levels
• Collapsible sections