<h2>When to use</h2>
<p>Drawer is similar to tooltip and popover but are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Drawer</td>
<td>A drawer can contain different kinds of content or small interactions. It is a secondary content component that sits off-screen until triggered by the user.</td>
</tr>
<tr>
<td><a href="/components/tooltip/">Tooltip</a></td>
<td>Tooltip is a container that temporarily displays short, contextual text and is activated when a user hovers or focuses on an icon or other trigger.</td>
</tr>
<tr>
<td><a href="/components/popover/">Popover</a></td>
<td>Popover is a container that displays supplemental information after pressing its trigger element. They can contain limited interactions with its content, but should not contain actions that are required for the experience.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The drawer component, depending on the <a href="/components/drawer/?tab=Design#kinds">options</a> combinations, can contain up to four elements within three sections.</p>
<details data-name='image-block' data-images='[{"alt":"The parts of a drawer, labeled 1 through 4.","caption":"Example showing the four elements within three sections:\n\n**Header**\\\n 1. Button: the trigger required to hide the drawer.\\\n 2. Title (optional): headline or title.\\\n**Body**\\\n 3. Container (optional): textual content or interactive fields.\\\n**Footer**\\\n 4. Call-to-action (optional): optional button, button group, or link.","url":"https://dds.dell.com/site/production/e1/fd/3_2_Anatomy_6a5f2c3ec5.png"}]' data-numberofcolumns='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/vertical-nav/","type":"External"},"title":"Left-Side Vertical Navigation","description":"Read the Nielsen Norman Group&#39;s article on vertical navigation.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/timing-exposing-content/","type":"External"},"title":"Timing guidelines","description":"Read the Nielsen Norman Group&#39;s article on drawer&#39;s timing.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Drawers are commonly used to present secondary content, such as contextual information, large filters, short configurators, or optional forms. This component displays information that could be placed on the page, but due to limited screen real-estate or the intention to direct users’ attention, it only appears when triggered by the user. 

It is not necessary to navigate away from the page to read more information or complete an action inside the drawer.

### Contextual information


Drawers are useful for providing contextual information and references related to the experience or current page, such as shopping carts. In this scenario, users can view information or complete actions related to their shopping experience in a different space, but within the same main page.



<details data-name='image-block' data-images='[{"alt":"Example of a text-only drawer","caption":"Text-only drawer: used for supplemental content or elements, such as definitions, short articles, and other reference material that do not fit within a tooltip.","url":"https://dds.dell.com/site/production/4c/89/Drawer_Usage1_5c1ec96470.png"}]' data-numberofcolumns='1'></details>



### Simple and optional forms

Optional and simple forms can be implemented within a drawer. Options like a short configurator can also be the reason for using a drawer in an experience. This way users will have a focused user experience, where it’s possible to select and engage with the options and configurations without having to navigate to another page.

<details data-name='image-block' data-images='[{"alt":"Example of a drawer with calls to actions.","caption":"Drawer with calls to action: typically contain optional interactive elements, such as complex filters or simple forms.","url":"https://dds.dell.com/site/production/93/6e/Drawer_Usage2_41c1cb609f.png"}]' data-numberofcolumns='1'></details>

### Large filters

Use a drawer where the experience requires many filter options, providing the user a possibility to customize their preferences having a focused experience. This can help reduce clutter and unnecessary information on the main page.

## Sizes

A drawer component has four different sizes: large, medium, small, and extra small. 


Drawers are responsive, which means they change their sizes in the experience depending on the screen size.


The width changes based on the size chosen, while the height stays the same.  

Consider the content you will implement in the drawer to choose the appropriate size.

<details data-name='image-block' data-images='[{"alt":"Large drawer component.","caption":"Large drawer has a width of 1200 pixels.","url":"https://dds.dell.com/site/production/54/2d/Drawer_Large_3701638698.png"},{"alt":"Medium drawer component.","caption":"Medium drawer has a width of 920 pixels.","url":"https://dds.dell.com/site/production/7e/08/Drawer_Medium_231d2b7f67.png"},{"alt":"Small drawer component.","caption":"Small drawer has a width of 560 pixels.","url":"https://dds.dell.com/site/production/ac/d2/Drawer_Small_6e81165e9a.png"},{"alt":"Extra small drawer component.","caption":"Extra small drawer has a width of 320 pixels.","url":"https://dds.dell.com/site/production/f9/61/Drawer_Extrasmall_46f161de27.png"}]' data-numberofcolumns='1'></details>

| Size        | Use case                                                                                                                                                                                                                                                 |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Large       | Use a large drawer when you have a large amount of important information. When opened, the drawer will cover almost the entire standard desktop screen.                                                                                                  |
| Medium      | Medium drawers can accommodate a considerable amount of content in it, occupying more than half of a standard desktop screen.                                                                                                                            |
| Small       | A small drawer can be used for situations that fall between a medium or extra small requirements, providing a balanced size for the content. It occupies less than half of a standard desktop screen, but it’s not as compacted as the extra small size. |
| Extra small | Used for minimal information and content. When the main page contains important information that is not supposed to be covered, consider using an extra small drawer. It is placed in a small percentage of the standard desktop screen.                 |

## Layout

Drawers were built to be placed on the right side of the screen, sliding to the left side when triggered, and adding an overlay to the previous shown screen. 

For desktop or mobile views, the component will always cover the entire screen height, while its width will depend on the size chosen. However, the drawer’s width will never cover than 90% of the screen.

### Alignment

Ensure the primary or secondary buttons within the footer and the header are always aligned to the left side of the drawer. Making sure they are in the correct position is important to improving readability throughout the experience.

## Interaction

### Behavior and states

The drawer is opened and closed by pressing a trigger, and it can also be closed by pressing anywhere on the main screen, outside the drawer. 

When the drawer component is open, an [overlay](/components/overlay/?tab=Design) appears behind it, shifting the focus from the page to the drawer.

It is possible for a drawer to include a scroll feature in case the content displayed requires it. However, be as concise as possible to minimize cognitive load and to help users get back to their original task.

<details data-name='image-block' data-images='[{"alt":"Drawer component including the scroll feature.","caption":"Drawer component including the scroll feature.","url":"https://dds.dell.com/site/production/27/31/2_1_Interaction_scroll_529d9df3c6.png"}]' data-numberofcolumns='1'></details>

A drawer component does not have different states, since the component consists of only a container that holds content, including text, images, charts, or actions. 

If the drawer contains a footer with buttons, the buttons’ states should follow their standard guidelines. See [button behavior and states](/components/button/?tab=Design#interaction) to understand different states.

## Standards

### Accessibility

#### **Any drawers not using a title must still be labeled for accessibility**

Like modals, drawers require an accessible name, which is provided to users with assistive technology. Using a variant with a title is strongly recommended, since it meets this requirement while providing the same experience for all users regardless of ability. If a drawer has no visible title in the header, it should be labeled using aria-label or aria-labeled by.

WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)

#### **Drawers should trap keyboard users’ focus until dismissed**

When using a drawer, a user should not be allowed to interact with any element on the page outside that drawer until they dismiss it, either with the back button (or escape key) or by initiating an action. 

WCAG 2.2: [2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html), [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html), [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)

#### **Drawers should follow keyboard focus behavior for modal interactions**

For people who rely on a keyboard or assistive technology and not a mouse to navigate, it’s important that focus is handled correctly. As with other modals, on opening, focus should be placed on either the drawer’s back button or the first interactive element inside the drawer as appropriate. On close, the focus should be placed on the element that triggered the drawer. Refer to the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) for recommended modal focus behavior and expected keyboard interactions. 

WCAG 2.2: [1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html), [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)

#### **Avoid placing critical information in a drawer**

Avoid placing essential information inside a drawer. Users will have no prior idea what essential content is within a drawer and are only able to see it while the drawer is open. If you have information critical to the experience or user understanding, place it where it is easier to find and more permanently visible.

#### **Do not trigger a modal from inside a drawer**

A drawer is already a form of modal, so it should avoid triggering yet another modal on top. This can be distracting and cause various problems for accessibility. If absolutely necessary, additional screens can be shown within the drawer, with the user able to move back and forth sequentially.

## Content

#### **Drawer header**

Be brief and descriptive about the subject or action a user must take. Try to use verb and noun combinations that clearly describe the drawer’s task or purpose. Header length should not exceed one line.

#### **Body text**

Body text length will adjust itself based on the size of the drawer component. Use the space to explain the purpose of the drawer and make the content useful for the user. Content can include imagery, charts, tables, or text.

#### **Capitalization**

Use sentence case in headers and body text, unless referring to a proper noun. For buttons, use title case.

#### **Punctuation**

Do not punctuate button text or header text. For the drawer body, use normal punctuation rules.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-drawer--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-drawer--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-drawer--basic)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-drawer--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-drawer--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-drawer--docs&viewMode=docs&websiteFrame=true'></details>

A drawer is a secondary content component that sits off-screen until triggered by the user.

Drawer

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
