React Components

# Drawer

The Drawer component provides a sliding panel that reveals additional content without navigating away from the current page.

## Overview

---

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Drawer</td></tr><tr><th scope="row">Also known as</th><td>Sidenav, Panel</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/branch/5BA2ZwZaX2bzfiWwTyMpQH/ODS---UI-Kit?node-id=5488-15121&amp;p=f&amp;t=gPfKLQM0iEuF2FXm-0" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/drawer" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-drawer--documentation" target="_blank">Previous major version<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

The **Drawer** component is ideal for use cases where content should be revealed in context without navigating to a new page. Common examples include:

-   Side navigation menus
-   Filters and settings panels
-   Detail views or contextual information

| ✅ Do |
| --- |
| - Use a Drawer to display contextual content or actions that stay relevant to the current page (e.g., filters, side forms, settings) |
| - Allow the Drawer to be dismissed via clear and accessible interactions (e.g., close button, escape key, clicking outside) |
| - Customize the Drawer's width, height, and placement to match your layout and content needs |
| - Keep transitions smooth and responsive, respecting the expected animation duration (e.g., 300ms) in the OVHcloud Design System |
| - Maintain proper layering and z-index behavior |
| - Use Drawers to maintain continuity of the user's workflow without breaking the page context |

| ❌ Don't |
| --- |
| - Don't add more than one open Drawer at a time |
| - Don't use excessively large Drawers that cover most or all of the page |
| - Don't rely on Drawers for critical actions that require user confirmation, Modals are better suited for that |
| - Don't leave Drawers open without a visible way to close them, always provide a clear exit path |

### Best Practices in Context

1.  **Drawer**

## Placement

---

The **Drawer** can be positioned on any edge of the screen:

-   **Left/Right**: Covers 100% of the page height, with a default width of 320px and a maximum width of 100% - 3rem (48px)
-   **Top/Bottom**: Covers 100% of the page width, with a default height of 320px and a maximum height of 100vh - 3rem (48px)

The **Drawer** is displayed above all page content but is positioned below the Modal in terms of layering, following the z-index hierarchy defined by OVHcloud Design System. This ensures consistent stacking behavior across components.

By default, the OVHcloud Design System does not enforce whether the **Drawer** is fixed or scrollable. Integrators can configure this behavior based on their specific use case and requirements.

Be careful the placement of the drawer can be broken if you create a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) . For example with a transform style or scale.

## Behavior

---

The **Drawer** supports the following interactions:

-   Expansion: Triggered by interacting with a designated element, such as a button.
-   Collapsing:
-   By interacting with the same trigger used for expansion
-   By pressing the escape key

Animation: The **Drawer** slides into view with a smooth animation (default duration: 300ms).

## Variation

---

The **Drawer** can slide in from the left, right, top, or bottom, depending on its configuration and the layout of the page.

## Navigation

---

### Focus Management

When the **Drawer** is opened, focus automatically moves to the first focusable element inside.

When the **Drawer** is closed, focus returns to the trigger element unless overridden by the integrator.

### General Keyboard Shortcuts

Pressing Escape closes the **Drawer**.

Pressing Tab moves focus forward through the focusable elements inside the **Drawer**.

Pressing Shift + Tab moves focus backward within the **Drawer**.

Once the last focusable element is reached, focus does not leave the **Drawer** unless it is closed.

## Accessibility

---

To ensure the **Drawer** is fully accessible, correct ARIA attributes must be implemented. This ensures screen readers announce the **Drawer** properly and that keyboard users can interact with it effectively.

### Linking the Drawer title and content

Ensure that assistive technologies announce the **Drawer** correctly using [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) or [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) , and [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby) .

```jsx
<Drawer>
  <DrawerTrigger asChild>
    <Button>
      Trigger Drawer    </Button>
  </DrawerTrigger>
  <DrawerContent
    aria-describedby="drawer-content"
    aria-label="My drawer"
  >
    <DrawerBody id="drawer-content">
      The drawer content    </DrawerBody>
  </DrawerContent>
</Drawer>
```

```jsx
<Drawer>
  <DrawerTrigger asChild>
    <Button>
      Trigger Drawer    </Button>
  </DrawerTrigger>
  <DrawerContent
    aria-describedby="drawer-content"
    aria-labelledby="drawer-title"
  >
    <DrawerBody>
      <h2 id="drawer-title">
        My drawer      </h2>
      <p id="drawer-content">
        The drawer content      </p>
    </DrawerBody>
  </DrawerContent>
</Drawer>
```

Screen readers will announce the sections referenced by the aria attributes.