Drawer
A slide-in panel used to display critical content.
Projects /
Projects /
A slide-in panel used to display critical content.
The drawer component is a slide-in element that can be used to display relevant information without losing the context of the page.
To connect the drawer to its trigger (e.g., button), make sure the id value of the first one is equal to the aria-controls value of the second one.
If you want the drawer to open from the left side of the screen, add the drawer--open-left class to the drawer element.
If you want the drawer to act like a modal, add the drawer--modal class to the drawer element (see the --modal variation).
You can listen to the opening/closing of a drawer element using the two custom events drawerIsOpen and drawerIsClose that are emitted when the drawer is open/close.
Here's how you can listent to these custom events:
var drawer = document.getElementsByClassName('js-drawer')[0];
drawer.addEventListener('drawerIsOpen', function(event){
// drawer is open
// event.detail is the element that triggered the drawer opening
});
drawer.addEventListener('drawerIsClose', function(event){
// drawer is close
});When the drawer is open, you may want to change the overflow behavior of a different element (e.g., the body element) to prevent the underlying content from scrolling while the drawer is open.
To do that, add a data-drawer-prevent-scroll attribute equal to a unique CSS selector of the element to modify. For example, to target the <body>:
<div class="drawer js-drawer" data-drawer-prevent-scroll="body" id="drawer-1">
<!-- drawer content here -->
</div>
