Side Drawer
A drawer is a panel that slides in from the right side of the viewport.
Last updated
A drawer is a panel that slides in from the right side of the viewport.
Last updated
Side Drawer is an overlaid panel : it appears on top of a page and slides in from the right side of the viewport.
This component is useful when we want to organize a page content into different levels. Defer secondary content helps to limit visual clutter and minimize cognitive load. That said, this content must remain easily available and appear when users intends to expose it.
Typical use case is to deep dive into a specific element without having to leave the current page. That way, tasks can be achieved more efficiently within the same context.
Exemples :
Take a closer look into a datatable element
Opening a large list of datatable filters
Opening details of a datalist element
Take quick actions
The Side Drawer comes in three sizes to accommodate its content. It's up to designers to decide which size is more appropriate for visualizing the content.
Small : 356px
Medium : 450px
Large : 600px
The only mandatory component to display in the Side Drawer is the title. It helps users to understand to which element Side Drawer is related to.
The content of the Side Drawer is almost design-free. However, keep in mind to make it easy to read. Therefore, we have prohibited the use of the Expandable Panel inside the Side Drawer, as it may introduce excessive complexity, affecting readability.
When the drawer is open, all actions on the main page are disabled. Users must close the drawer to perform any actions on the main page.
A datatable row can open a side drawer, not just the hyperlink (href) cell.
There is several ways to exit Side Drawer :
A Close Button,always available to the top-right corner.
A Click outside of the Side Drawer area
An action through a Primary Button of the Save Bar. Though it is optional, to add a Save Bar
When using a keyboard to navigate the interface, user can use the 'Esc' key, also known as the Escape key, to exit or close the drawer.
