Component library

Drawer component

Last updated 2 November 2026

Creates a side drawer element.

Live demo

NOTE: If you are using iframes, your 'ins-drawer' should be placed outside of the 'iframe'. Use parent to select your element.

Open this demo full screen

<ins-button 
  label="Open Inner" 
  solid color="blue" 
  id="openDrawerEl">
</ins-button>

<ins-button 
  label="Open Outer" 
  solid 
  color="blue" 
  id="openOuterDrawerEl">
</ins-button>

<!-- Drawer inside iframe -->

<ins-drawer 
  label="Inner Drawer" 
  custom-width="550px" 
  position="left" 
  icon="icon-star" 
  id="drawerEl">

  <h4>Hello World</h4>

  <p>You can add any HTML element here. Use <code>custom-width</code> attribute to set your custom width.</p>

  <ins-input 
    label="Name">
  </ins-input>

  <ins-input 
    label="Email">
  </ins-input>

  <div style="text-align: right;">

    <ins-button 
      solid 
      color="blue" 
      label="Save">
    </ins-button>

  </div>

</ins-drawer>

<script>
  // this button opens the <ins-drawer> inside of the iframe
  document.getElementById('openDrawerEl').addEventListener('insClick', function() {
    document.getElementById('drawerEl').setDrawerState(true);
  });
  // this button opens the <ins-drawer> outside of the iframe
  document.getElementById('openOuterDrawerEl').addEventListener('insClick', function () {
    parent.document.getElementById('drawerOutsideEl').setDrawerState(true);
  });
</script>

Attributes

Properties

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	any	Defines drawer heading text
icon	string	""	any	Defines heading icon CSS class
is-open	boolean	false	true, false	Open / Close the drawer element
position	string	right	left, right	Defines drawer placement
sticky-header	boolean	true	true, false	Make heading sticky on top of the drawer element
show-header	boolean	true	true, false	Show / Hide drawer heading
bordered	boolean	true	true, false	Defines heading has border bottom
custom-width	string	"420px"	any	Defines custom width of drawer
no-padding	boolean	false	true, false	Defines drawer body has padding
backdrop-can-close	boolean	true	true, false	Click on backdrop closes the drawer
show-close-button	boolean	true	true, false	Show / Hide drawer close button

Events

EVENT	OBJECT	DESCRIPTION
insToggle	status, label	Emit drawer element details on change state.

Methods

FUNCTION	PARAMETERS	RETURN	DESCRIPTION
setDrawerState	boolean	n/a	Open / Close drawer element

Examples

Event Example

<ins-button 
  label="Open" 
  solid 
  color="blue" 
  id="openEventDrawer">
</ins-button>

<ins-drawer 
  label="Sample" 
  show-header="false" 
  id="eventDrawerEl">
  
  <h4>Hello World</h4>

  <p>This drawer sample has no heading.</p>

  <p>See console log for event data.</p>
 
 <hr>

  <p>
    This is a sample content.
  </p>

</ins-drawer>

<script>
  // button event to open drawer
  document.getElementById('openEventDrawer').addEventListener('insClick', function () {
    document.getElementById('eventDrawerEl').setDrawerState(true);
  });
  // Drawer event listener
  document.getElementById('eventDrawerEl').addEventListener('toggleDrawer', function (event) {
    console.log("Toggle Drawer", event.detail)
  });
</script>

Complete Sample

<ins-button 
  id="toggleButton" 
  label="Open">
</ins-button>

<ins-notifications 
  id="sample-notification">

<ins-notifications-item 
  event-type="Task Completed" 
  heading="Heading" 
  duration="5 mins ago" 
  desc="This is a sample content."
  link="/" link-label="View Task" 
  icon="icon-check" 
  status="green">

</ins-notifications-item>

</ins-notifications>

<script>
    var insNotificationsEl = document.getElementById('sample-notification');
    var toggleButton = document.getElementById('toggleButton');
    toggleButton.addEventListener('click', function () {
      insNotificationsEl.toggleNotificationshandler();
    });
</script>