Side Drawer

A drawer is a panel that slides in from the right side of the viewport.

Overview

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

Guidelines

Layout

Sizes

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

Compatible components to use with Side Drawer

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.

Behaviors

General behaviors

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.

Exit behaviors

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

Accessibility

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.

Last updated