Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Documentation | In progressElement design and development in progress |
Drawer
A drawer is a secondary content component that sits off-screen until triggered by the user.
Contents
When to useCopy link to this section
Copy link to this section
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.
| Component | Use case |
|---|---|
| Drawer | 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. |
| Tooltip | 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. |
| Popover | 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. |
AnatomyCopy link to this section
Copy link to this section
The drawer component, depending on the options combinations, can contain up to four elements within three sections.
Example showing the four elements within three sections:
Header
1. Button: the trigger required to hide the drawer.
2. Title (optional): headline or title.
Body
3. Container (optional): textual content or interactive fields.
Footer
4. Call-to-action (optional): optional button, button group, or link.
ArticlesCopy link to this section
Copy link to this section
Left-Side Vertical Navigation
Read the Nielsen Norman Group's article on vertical navigation.
Contents
Contents
UsageCopy link to this section
Copy link to this section
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
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.
Drawers are useful for providing contextual information and references related to the experience or current page. This component can display extra information or features that will not take up space on the 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.
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.
Drawer with calls to action: typically contain optional interactive elements, such as complex filters or simple forms.
Large filters
The drawer component is a good option for holding an extensive filtering situation. Use a drawer where the experience requires many filters options, providing the user a possibility to customize their preferences having a focused experience. This is useful not to clutter the main page with information that is not mandatory.
SizesCopy link to this section
Copy link to this section
A drawer component has four different sizes: large, medium, small, and extra small. The width changes based on the size chosen, while the height stays the same. Regardless of the chosen size, the drawer component will never take up more than 90% of the screen. Consider the content you will implement in the drawer to choose the appropriate size.
Large drawer has a width of 1200 pixels.
Medium drawer has a width of 920 pixels.
Small drawer has a width of 560 pixels.
Extra small drawer has a width of 320 pixels.
| 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. |
LayoutCopy link to this section
Copy link to this section
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. Drawers are responsive, which means they change their sizes in the experience depending on the screen size. For desktop or mobile’s 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.
InteractionCopy link to this section
Copy link to this section
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 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, it is recommended to be as concise as possible to minimize cognitive load and to help users get back to their original task.
Drawer component including the scroll feature.
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 to understand different states.
StandardsCopy link to this section
Copy link to this section
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.1: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels
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.1: 2.1.2 No Keyboard Trap, 2.1.1 Keyboard, 2.4.3 Focus Order
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 for recommended modal focus behavior and expected keyboard interactions.
WCAG 2.1: 1.4.13 Content on Hover or Focus, 2.4.3 Focus Order, 2.1.1 Keyboard
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.
ContentCopy link to this section
Copy link to this section
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.
Contents
Contents
Live demoCopy link to this section
Copy link to this section
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
You are now entering a live demo of the component.
<div class="dds__drawer" aria-hidden="true" data-dds="drawer" id="drawer-basic" tabindex="-1">
<div class="dds__drawer__overlay" aria-hidden="true"></div>
<div class="dds__drawer__container">
<div class="dds__drawer__header">
<button type="button" class="dds__drawer__close">Back</button>
</div>
<div class="dds__drawer__body">
<h3 class="dds__drawer__title">Default Drawer</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempor enim, ut tincidunt turpis. Nulla libero eros,
sollicitudin ac enim a, rhoncus tempus nunc. Donec suscipit lectus in mattis pretium. Aliquam massa nulla, porta id ante non,
vestibulum scelerisque nibh. Nullam aliquam diam sed volutpat laoreet. Sed faucibus velit sed interdum cursus. Curabitur turpis
lorem, sodales ultricies massa vitae, accumsan semper sapien. Maecenas sollicitudin ipsum placerat leo egestas mattis. Pellentesque
volutpat in ante eget gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque
ac imperdiet elit. Nunc facilisis orci non volutpat semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Etiam eu sagittis diam, at aliquet urna. Vestibulum euismod id nisl ac consectetur. Sed turpis nulla, pellentesque
nec sem at, dignissim iaculis urna.
</p>
<p>
Morbi ut varius nibh. Donec finibus purus id nunc fermentum, ac convallis massa lobortis. Mauris sed purus mattis, rutrum dolor et,
tincidunt est. Aenean pharetra ac elit in accumsan. Morbi a tempus turpis. Nullam vel nibh nulla. Mauris maximus a nulla sit amet
tristique. Vestibulum placerat justo non cursus porta. Phasellus at iaculis nulla, ut vulputate orci. Quisque ut diam eget lectus
malesuada commodo in a velit. Nam ac risus mi. Aenean nec placerat enim. Fusce vel orci nunc. Nullam rhoncus dapibus lacinia.
Phasellus egestas ut turpis eu aliquam. Vestibulum ut libero in lacus aliquet mollis vel ullamcorper neque.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam purus elit, faucibus mattis
suscipit vitae, fermentum posuere nisl. Nam rhoncus nulla eget malesuada feugiat. Pellentesque ultrices, diam non hendrerit
convallis, augue risus posuere tortor, a tincidunt arcu eros ac elit. Morbi eget leo non dui cursus consectetur. Aenean vel felis
orci. Morbi sodales diam sit amet neque egestas, nec sodales enim pellentesque. Vestibulum eu odio porttitor, ornare est et,
facilisis justo. Integer ultricies nec tortor sed volutpat. Cras eu sapien a purus mollis auctor eu id neque. Morbi blandit sem at
arcu ornare ultrices imperdiet ac augue. Mauris rhoncus malesuada urna quis vestibulum.
</p>
<p>
Vestibulum ultricies risus id justo rhoncus lacinia. Phasellus lacinia justo hendrerit ultricies ornare. Morbi vel porttitor libero.
In gravida enim sed dictum molestie. Quisque porttitor arcu nec rhoncus varius. Mauris ex dolor, tincidunt sed lorem sed, dictum
lobortis neque. Vestibulum quis varius augue. Phasellus consectetur imperdiet dictum. Donec et ex quis turpis venenatis pellentesque
sed eu nisl. Maecenas non egestas augue. Mauris tempor ornare vehicula. Aenean posuere ipsum vulputate ultrices mollis. Vestibulum
arcu mauris, congue sed fermentum eu, placerat non sem. Maecenas enim nibh, aliquet convallis venenatis nec, venenatis ac est. Fusce
feugiat cursus eleifend. Etiam tempus maximus mauris, nec lobortis velit elementum eu.
</p>
<p>
Mauris dignissim porta felis, sit amet molestie nisi sodales aliquam. Duis sem quam, porttitor in leo non, maximus sodales justo.
Mauris id condimentum purus. Duis a velit porttitor, volutpat nulla in, blandit ante. Etiam tincidunt vulputate facilisis. Aliquam
lorem quam, aliquet et eros eu, luctus placerat nibh. Suspendisse a auctor tortor, et elementum nunc. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eu est rutrum, molestie urna nec, feugiat nibh. Donec
vulputate turpis eu elit rutrum, eget suscipit diam imperdiet. Vestibulum pulvinar ac dolor sit amet tempor. Quisque ante nulla,
dictum at libero a, volutpat ornare eros.
</p>
<p>
Sed commodo dapibus urna. Curabitur consequat, diam luctus egestas egestas, metus dui ultrices metus, eu suscipit sapien quam et
tellus. Proin ut ipsum non nunc venenatis maximus id non dolor. Morbi volutpat metus lacus. Donec euismod eros libero. Aenean
consequat metus et orci mattis, fringilla posuere velit accumsan. Praesent interdum congue libero, sit amet vehicula ipsum congue
sed. Pellentesque viverra velit lacus, eu lacinia tortor faucibus id. Praesent commodo ex a neque laoreet, convallis condimentum
ligula feugiat.
</p>
<p>
Proin eget mauris non enim fermentum porttitor quis et metus. Donec sagittis nulla dolor, eu posuere velit commodo vel. Nam quis mi
ac ligula aliquet pharetra hendrerit lacinia elit. Quisque ullamcorper lorem lectus, vel tincidunt magna ornare eget. Quisque in
ullamcorper risus, quis elementum odio. Vivamus lobortis ex quam, consectetur tincidunt lectus cursus eget. Maecenas vitae leo
cursus, consequat nisl sit amet, accumsan justo. Etiam ut ex auctor, vestibulum urna id, rhoncus urna. Vestibulum a augue aliquam,
tempor libero nec, viverra tortor.
</p>
<p>
Morbi sit amet scelerisque elit. In semper sem at rutrum laoreet. Aenean non felis pretium, sollicitudin ligula nec, dapibus ante.
In ut scelerisque ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultrices placerat sem, nec varius justo
imperdiet ac. Ut fringilla ligula eget odio pulvinar eleifend. Vivamus quis enim vitae urna eleifend dignissim. Curabitur vulputate
condimentum facilisis.
</p>
<p>
Etiam tempor mi at erat eleifend, a finibus magna pretium. Etiam nec molestie neque. Suspendisse in risus augue. Nam congue est quis
semper pulvinar. Curabitur feugiat mattis ultrices. Fusce eu nibh pulvinar, semper augue non, sodales magna. Aliquam consequat
aliquet eleifend.
</p>
<p>
Fusce ullamcorper sapien ut dignissim lobortis. Nunc ut placerat nulla. Nullam dapibus nunc quis metus rutrum pretium. Praesent non
faucibus nunc. Donec in nunc ac mi sodales convallis. Donec tempus, risus rutrum pharetra dapibus, elit felis ultricies neque, non
tempus arcu eros a lorem. In ut convallis lacus. Suspendisse potenti. Nunc maximus maximus viverra. Fusce mollis ut mi nec
ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut elementum nisl et neque
mollis, id auctor ipsum efficitur. Curabitur tincidunt, nisl non laoreet fringilla, nisi ex finibus ipsum, sit amet condimentum
nulla leo consectetur massa. Morbi leo nulla, tincidunt id urna ut, hendrerit varius risus. In a maximus tortor. Donec eget lorem at
nulla semper convallis.
</p>
<button type="button" class="dds__button dds__button--primary dds__mr-2">Primary</button>
<button type="button" class="dds__button dds__button--secondary">Secondary</button>
</div>
</div>
</div>