When to use
- Secondary content: Use for content that supports but is not critical to the main task, such as settings, filters, or additional options.
- Chatbot interface: Place chat or support tools in a side panel to allow users to engage without losing context.
- Space management: Useful in layouts where screen space is limited, enabling users to toggle navigation or the chatbot’s visibility.
When not to use
- Simple navigation: Avoid using the Drawer if your application has only a few navigation links; a top navigation bar may be more effective.
- Critical actions: Don’t place critical actions or essential information inside the Side Panel, as it may be hidden from the user’s immediate view.
- Non-interactive content: If the content is not interactive or doesn’t require frequent user access, consider using another layout approach.
Behavior
- Collapsible: The Drawer can be expanded or collapsed, allowing users to control its visibility.
- Responsive: Automatically adjusts to different screen sizes, with options for fixed or temporary modes depending on the device.
- Multi-Purpose: Can be configured to serve both as a navigation panel or as a container for a chatbot, depending on the use case.
- Backdrop Control: The Drawer can be configured with a backdrop that dims the rest of the screen when open. This backdrop can be turned on or off based on the user experience needs.
- Directional Flexibility: The Drawer can slide in from either the left or right side of the screen, offering flexibility depending on the application’s design requirements.
Placement
- Left or Right Edge of the Screen: The Side Panel can be placed on either the left edge for navigation or on the right edge for chatbots, aligning with user expectations.
- Top-Level Sections: Place high-level sections or categories within the Side Panel for structured navigation, or place the chatbot for easy access.
- Avoid Overlapping Content: Ensure the Drawer does not obscure critical content when opened, particularly on smaller screens.