Drawer

Open a supporting panel from the edge while preserving the current view's context.

<sy-drawer>Installation guide Basic usage

Live preview

Interact with the component to see results here.

PositionSizeCustom size (px)Animation

Close buttonOmit backdrop maskClose on backdrop clickPrevent user dismissal

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="right"
  mask-closable
  animation="none"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Usage guide

Show details or supporting settings while preserving the current view. Use Modal when a decision is required.

Position and size: Choose a direction with position. For a custom size, use size="custom" and customSize in pixels.
Content structure: Separate the title, details, and actions with the header, body, and footer slots.
Opening and closing: Open with open and configure dismissal through closable and maskClosable.

Examples

Detail panel

View item details on the right.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Left panel

Open supporting navigation on the left.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="left"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Bottom panel

Place supporting content at the bottom.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="240"
  position="bottom"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Keep background visible

Display the panel without a backdrop mask.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  maskless
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Enter and exit

Use a slide effect matching position.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  animation="slide"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="right"
  mask-closable
  animation="none"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
  for (const name of ["opened", "closed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Close the panel on navigation

closeOnNavigation closes open panels when back or forward navigation triggers popstate. Use it to clear panel state as the app navigates through history.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="right"
  mask-closable
  animation="none"
  close-on-navigation
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "closeOnNavigation": true
  });
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Top drawer

Open a compact drawer from the top of the preview.

View code

HTML

<sy-button id="open-drawer">Open detail panel</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="160"
  position="top"
  mask-closable
  animation="none"
  id="sample"
><strong slot="header">Project information</strong>
  <div slot="body">
    <p>Owner · Alex Kim</p>
    <p>Status · Under review</p>
  </div>
  <sy-button slot="footer" id="close-drawer">Confirm</sy-button>
</sy-drawer>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "position": "top",
    "size": "custom",
    "customSize": 160
  });
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

Feature examples

Choose a feature from 14 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.