OLYSENSE Design System

Drawers slide in from a container to expose additional options and information.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close

Open Drawer

<ods-drawer label="Drawer" class="drawer-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawer = document.querySelector('.drawer-overview');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('ods-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

By default, drawers slide in from the right. To make the drawer slide in from the left, set the placement attribute to start.

This drawer slides in from the start. Close

Open Drawer

<ods-drawer label="Drawer" placement="start" class="drawer-placement-left">
  This drawer slides in from the start.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerPlacementLeft = document.querySelector('.drawer-placement-left');
  const openButtonPlacementLeft = drawerPlacementLeft.nextElementSibling;
  const closeButtonPlacementLeft = drawerPlacementLeft.querySelector('ods-button[variant="primary"]');

  openButtonPlacementLeft.addEventListener('click', () => drawerPlacementLeft.show());
  closeButtonPlacementLeft.addEventListener('click', () => drawerPlacementLeft.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" placement="start" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        This drawer slides in from the start.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

To make the drawer slide in from the top, set the placement attribute to top.

This drawer slides in from the top. Close

Open Drawer

<ods-drawer label="Drawer" placement="top" class="drawer-placement-top">
  This drawer slides in from the top.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerPlacementTop = document.querySelector('.drawer-placement-top');
  const openButtonPlacementTop = drawerPlacementTop.nextElementSibling;
  const closeButtonPlacementTop = drawerPlacementTop.querySelector('ods-button[variant="primary"]');

  openButtonPlacementTop.addEventListener('click', () => drawerPlacementTop.show());
  closeButtonPlacementTop.addEventListener('click', () => drawerPlacementTop.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" placement="top" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        This drawer slides in from the top.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

To make the drawer slide in from the bottom, set the placement attribute to bottom.

This drawer slides in from the bottom. Close

Open Drawer

<ods-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
  This drawer slides in from the bottom.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerPlacementBottom = document.querySelector('.drawer-placement-bottom');
  const openButtonPlacementBottom = drawerPlacementBottom.nextElementSibling;
  const closeButtonPlacementBottom = drawerPlacementBottom.querySelector('ods-button[variant="primary"]');

  openButtonPlacementBottom.addEventListener('click', () => drawerPlacementBottom.show());
  closeButtonPlacementBottom.addEventListener('click', () => drawerPlacementBottom.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" placement="bottom" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        This drawer slides in from the bottom.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

By default, drawers slide out of their containing block, which is usually the viewport. To make a drawer slide out of a parent element, add the contained attribute to the drawer and apply position: relative to its parent.

Unlike normal drawers, contained drawers are not modal. This means they do not show an overlay, they do not trap focus, and they are not dismissible with Escape. This is intentional to allow users to interact with elements outside of the drawer.

The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close

Toggle Drawer

<div style="position: relative; border: solid 2px var(--ods-sys-color-outline-base); height: 300px; padding: 1rem; margin-bottom: 1rem;">
  The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.

  <ods-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <ods-button slot="footer" variant="primary">Close</ods-button>
  </ods-drawer>
</div>

<ods-button variant="primary">Toggle Drawer</ods-button>

<script>
  const drawerContainedElement = document.querySelector('.drawer-contained');
  const openButtonContainedElement = drawerContainedElement.parentElement.nextElementSibling;
  const closeButtonContainedElement = drawerContainedElement.querySelector('ods-button[variant="primary"]');

  openButtonContainedElement.addEventListener('click', () => (drawerContainedElement.open = !drawerContainedElement.open));
  closeButtonContainedElement.addEventListener('click', () => drawerContainedElement.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const css2 = `
  .sense-drawer-container {
    position: relative;
    border: solid 2px var(--ods-sys-color-outline-base);
    height: 300px;
    padding: 1rem;
    margin-bottom: 1rem;
  }
`

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div className="sense-drawer-container">
        The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer
        opens.
        <OdsDrawer
          // @ts-expect-error Allow for use with this example.
          style={{ '--size': '50%' }}
          label="Drawer"
          contained
          no-modal
          open={open}
          onOdsDrawerAfterHide={() => setOpen(false)}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
            Close
          </OdsButton>
        </OdsDrawer>
      </div>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>

      <style>{css2}</style>
    </>
  )
}

export default Example;

Use the —size custom property to set the drawer’s size. This will be applied to the drawer’s width or height depending on its placement.

This drawer is always 50% of the viewport. Close

Open Drawer

<ods-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
  This drawer is always 50% of the viewport.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerSize = document.querySelector('.drawer-custom-size');
  const openButtonSize = drawerSize.nextElementSibling;
  const closeButtonSize = drawerSize.querySelector('ods-button[variant="primary"]');

  openButtonSize.addEventListener('click', () => drawerSize.show());
  closeButtonSize.addEventListener('click', () => drawerSize.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const css = `
  .sense-drawer {
    --size: 50vw;
  }
`

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer
        className="sense-drawer"
        label="Drawer"
        open={open}
        onOdsDrawerAfterHide={() => setOpen(false)}>
        This drawer is always 50% of the viewport.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>

      <style>{css}</style>
    </>
  )
}

export default Example;

By design, a drawer’s height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.

Scroll down and give it a try! 👇

Open Drawer

<ods-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--ods-sys-color-outline-base); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerScrolling = document.querySelector('.drawer-scrolling');
  const openButtonScrolling = drawerScrolling.nextElementSibling;
  const closeButtonScrolling = drawerScrolling.querySelector('ods-button[variant="primary"]');

  openButtonScrolling.addEventListener('click', () => drawerScrolling.show());
  closeButtonScrolling.addEventListener('click', () => drawerScrolling.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const css = `
  .sense-drawer-inner {
    height: 150vh;
    border: dashed 2px var(--ods-sys-color-outline-base);
    padding: 0 1rem;
  }
`

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        <div className="sense-drawer-inner">
          <p>Scroll down and give it a try! 👇</p>
        </div>
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>

      <style>{css}</style>
    </>
  )
}

export default Example;

The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.

Open Drawer

<ods-drawer label="Drawer" class="drawer-header-actions">
  <ods-icon-button size="small" class="new-window" variant="ghost" slot="header-actions" name="download"></ods-icon-button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerActions = document.querySelector('.drawer-header-actions');
  const openButtonActions = drawerActions.nextElementSibling;
  const closeButtonActions = drawerActions.querySelector('ods-button[variant="primary"]');
  const newWindowButtonActions = drawerActions.querySelector('.new-window');

  openButtonActions.addEventListener('click', () => drawerActions.show());
  closeButtonActions.addEventListener('click', () => drawerActions.hide());
  newWindowButtonActions.addEventListener('click', () => window.open(location.href));
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';
import { OdsIconButton } from '@ods/components/react.icon-button';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        <OdsIconButton slot="header-actions" size="small" variant="ghost" name="download" onClick={() => window.open(location.href)} />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.

To keep the drawer open in such cases, you can cancel the ods-drawer-request-close event. When canceled, the drawer will remain open and pulse briefly to draw the user’s attention to it.

You can use event.detail.source to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.

This drawer will not close when you click on the overlay. Close

Open Drawer

<ods-drawer label="Drawer" class="drawer-deny-close">
  This drawer will not close when you click on the overlay.
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerPreventClosing = document.querySelector('.drawer-deny-close');
  const openButtonPreventClosing = drawerPreventClosing.nextElementSibling;
  const closeButtonPreventClosing = drawerPreventClosing.querySelector('ods-button[variant="primary"]');

  openButtonPreventClosing.addEventListener('click', () => drawerPreventClosing.show());
  closeButtonPreventClosing.addEventListener('click', () => drawerPreventClosing.hide());

  // Prevent the drawer from closing when the user clicks on the overlay
  drawerPreventClosing.addEventListener('ods-drawer-request-close', event => {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
  });
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const [open, setOpen] = useState(false);

  // Prevent the drawer from closing when the user clicks on the overlay
  function handleRequestClose(event: any) {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
  }

  return (
    <>
      <OdsDrawer label="Drawer" open={open} onOdsDrawerRequestClose={handleRequestClose} onOdsDrawerAfterHide={() => setOpen(false)}>
        This drawer will not close when you click on the overlay.
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Save &amp; Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

By default, the drawer’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the autofocus attribute to it as shown below.

Open Drawer

<ods-drawer label="Drawer" class="drawer-focus">
  <ods-input autofocus placeholder="I will have focus when the drawer is opened"></ods-input>
  <ods-button slot="footer" variant="primary">Close</ods-button>
</ods-drawer>

<ods-button variant="primary">Open Drawer</ods-button>

<script>
  const drawerFocus = document.querySelector('.drawer-focus');
  const inputFocus = drawerFocus.querySelector('ods-input');
  const openButtonFocus = drawerFocus.nextElementSibling;
  const closeButtonFocus = drawerFocus.querySelector('ods-button[variant="primary"]');

  openButtonFocus.addEventListener('click', () => drawerFocus.show());
  closeButtonFocus.addEventListener('click', () => drawerFocus.hide());
</script>

import { useState } from 'react';
import { OdsDrawer } from '@ods/components/react.drawer';
import { OdsButton } from '@ods/components/react.button';
import { OdsInput } from '@ods/components/react.input';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <OdsDrawer label="Drawer" open={open} onOdsDrawerAfterHide={() => setOpen(false)}>
        <OdsInput autofocus placeholder="I will have focus when the drawer is opened" />
        <OdsButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
          Close
        </OdsButton>
      </OdsDrawer>

      <OdsButton onClick={() => setOpen(true)} variant="primary">Open Drawer</OdsButton>
    </>
  )
}

export default Example;

You can further customize initial focus behavior by canceling the sense-drawer-initial-focus event and setting focus yourself inside the event handler.

Importing

import '@ods/components/web.drawer';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The drawer's main content.
label	The drawer's label. Alternatively, you can use the `label` attribute.
header-actions	Optional actions to add to the header. Works best with `<ods-icon-button>`.
footer	The drawer's footer, usually one or more buttons representing various options.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
modal		new Modal(this)
open	boolean	false
label	string	''
placement	'top' \| 'end' \| 'bottom' \| 'start'	'end'
contained	boolean	false
noHeader no-header	boolean	false

Events

React Event	Description	Event Detail
ods-drawer-show	Emitted when the drawer opens.	--
ods-drawer-after-show	Emitted after the drawer opens and all animations are complete.	--
ods-drawer-hide	Emitted when the drawer closes.	--
ods-drawer-after-hide	Emitted after the drawer closes and all animations are complete.	--
ods-drawer-initial-focus	Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.	--
ods-drawer-request-close	Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.	--

Methods

Name	Description	Arguments
show()	Shows the drawer.	--
hide()	Hides the drawer	--

Parts

Name	Description
base	The component's base wrapper.
overlay	The overlay that covers the screen behind the drawer.
panel	The drawer's panel (where the drawer and its content are rendered).
header	The drawer's header. This element wraps the title and header actions.
header-actions	Optional actions to add to the header. Works best with `<ods-icon-button>`.
title	The drawer's title.
close-button	The close button, an `<ods-icon-button>`.
close-button__base	The close button's exported `base` part.
body	The drawer's body.
footer	The drawer's footer.

Dependencies

This component automatically imports the following dependencies.

ods-icon
ods-icon-button

Drawer

Examples

Basic

Placement Left

Placement Top

Placement Bottom

Contained to an Element

Custom Size

Scrolling

Header Actions

Preventing the Drawer from Closing

Customizing Initial Focus

Importing

Slots

Properties

Events

Methods

Parts

Dependencies