# Side Drawer

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FFJHgo3qfTPTpt4jhVTor%2FSide%20Drawer.gif?alt=media&#x26;token=39af2cc8-dbd7-464b-a5fc-ae571a21dd1f" alt="" width="483"><figcaption><p>Exemple of a Side Drawer</p></figcaption></figure>

## Overview

`Side Drawer` is an overlaid panel : it appears on top of a page and slides in from the right side of the viewport.&#x20;

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 :&#x20;

* Take a closer look into a datatable element&#x20;
* 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](https://design.mirakl.com/design/components/structure/panel/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.&#x20;
* A Click outside of the `Side Drawer` area&#x20;
* An action through a `Primary Button` of the `Save Bar`. Though it is optional, to add a Save Bar

## Accessibility&#x20;

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.