Side drawer
When to use a side drawer instead of a bottom drawer or product menu, and how to think about opting out of its layout primitives.
Alternatives
- Bottom drawer — Used for heavy forms, especially if they contain datatables, to support the user's main activity without disrupting it.
- Product menu — Used to display a collapsable menu as an overlay.
What is a side drawer
A side drawer is a modal dialog that slides in from the right side of the screen. They are used to display helpful information and small forms that support the users main activity without interrupting it.
- Side drawers can stack on top of each other.
- Side drawers should not contain data tables. Bottom drawers are more suitable for large, complex forms.
- Side drawers, bottom drawers and product menus cannot be used together i.e a side drawer should never have a bottom drawer or a product menu inside it and vice versa.
Choosing primitives vs custom implementations
SideDrawer content is composed using a combination of primitives and custom implementations. The primitives cover the most common use cases and where they aren't sufficient, it's possible to opt out in favor of a custom implementation.
Header
The header is a convenience layout primitive and hence can be easily opted out of. However, there should be little reason to opt out of it entirely. In case of a full opt out, it's the consumer's responsibility to provide proper padding and spacing between elements.
Title
The title primitive is a level 3 heading under the hood and it should suffice in most cases. It exists so that consumers don't have to guess the heading level every time. The title should be fairly consistent across most drawers and hence warrant little reason for opting out.
Body
Although the body content itself may have a lot of variance, it is not recommended to opt out of using SideDrawer.Body as it provides some critical scrolling and border behaviours. These behaviours are difficult to implement correctly and hence one should have very good reasons for opting out of this primitive.
Footer
The footer is a convenience layout primitive and hence can be opted out of easily. However, there should be little reason to entirely opt out of it entirely. When rolling a customer implementation, it's the consumers responsibility to provide proper padding and spacing between elements.