When to use a drawer
- Navigation: Use drawers for navigation menus that require quick access from anywhere in the app.
- Secondary Content: Ideal for housing secondary content or settings that don’t need to be always visible.
Behavior
Drawers are typically opened by interacting with an on-screen button and can be closed using the same button or a dismiss icon. If the drawer contains components for gathering information, such as inputs or checkboxes, ensure users are alerted about potential progress loss when they close the drawer.
Best practices
Content statuses
Communicate the status of drawer contents using message bars or empty states within the drawer. Place the indicators near the relevant components. For example, if only one section has an error, include an inline message bar in that section. For multiple errors, place a message bar at the top of the drawer.
Allow wrapping
Drawer content will adjust to fit the width of the drawer. If the content exceeds the drawer's height, it should scroll.