Navigation Drawer

<gstock-navigation-drawer> | GstockNavigationDrawer

Custom Size

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 container.
Toggle Drawer 
<div class="preview__canvas--box">
  <gstock-navigation-drawer open style="--size: 50%;">
    <p style="padding: 0 1rem;">This drawer is always 50% of the container.</p>
  </gstock-navigation-drawer>
</div>

<gstock-button>Toggle Drawer</gstock-button>

<script type="module">
  const drawer = document.querySelector('gstock-navigation-drawer');
  const toggleButton = drawer.parentElement.nextElementSibling;

  toggleButton.addEventListener('click', () => (drawer.open = !drawer.open));
</script>

Scrolling

By design, a drawer’s height will never exceed 100% of its container. As such, drawers will not scroll with the page.

Scroll down and give it a try! 👇

Drawer Item 1 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 2 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 3 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 4 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 5 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 6 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 7 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 8 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 9 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 10 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 11 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 12 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 13 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 14 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 15 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3 Drawer Item 16 Drawer Subitem 1 Drawer Subitem 2 Drawer Subitem 3
Toggle Drawer 
<div class="preview__canvas--box">
  <gstock-navigation-drawer open>
    <gstock-navigation-drawer-menu>
      <p style="padding: 0 1rem;">Scroll down and give it a try! 👇</p>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 1
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 2
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 3
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 4
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 5
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 6
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 7
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 8
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 9
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 10
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 11
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 12
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 13
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 14
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 15
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
      <gstock-navigation-drawer-menu-item icon="file-text">
        Drawer Item 16
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 1
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 2
        </gstock-navigation-drawer-menu-item>
        <gstock-navigation-drawer-menu-item>
          Drawer Subitem 3
        </gstock-navigation-drawer-menu-item>
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu>
  </gstock-navigation-drawer>
</div>

<gstock-button>Toggle Drawer</gstock-button>

<script type="module">
  const drawer = document.querySelector('gstock-navigation-drawer');
  const toggleButton = drawer.parentElement.nextElementSibling;

  toggleButton.addEventListener('click', () => (drawer.open = !drawer.open));
</script>

Prevent closure

By default, drawers will close when the user 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 gstock-request-close-event 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 Escape to dismiss it.

This drawer will not close when you click on the overlay.
Toggle Drawer 
<div class="preview__canvas--box">
  <gstock-navigation-drawer open>
    <gstock-navigation-drawer-menu>
      <gstock-navigation-drawer-menu-item icon="layers">
        This drawer will not close when you click on the overlay.
      </gstock-navigation-drawer-menu-item>
    </gstock-navigation-drawer-menu>
  </gstock-navigation-drawer>
</div>

<gstock-button>Toggle Drawer</gstock-button>

<script type="module">
  const drawer = document.querySelector('gstock-navigation-drawer');
  const toggleButton = drawer.parentElement.nextElementSibling;

  toggleButton.addEventListener('click', () => (drawer.open = !drawer.open));

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

Customizing Initial Focus

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.

Toggle Drawer 
<div class="preview__canvas--box">
  <gstock-navigation-drawer style="--body-spacing: var(--gstock-legacy-spacing-3);">
    <gstock-navigation-drawer-menu>
      <gstock-input autofocus placeholder="I will have focus when the drawer is opened"></gstock-input>
    </gstock-navigation-drawer-menu>
  </gstock-navigation-drawer>
</div>

<gstock-button>Toggle Drawer</gstock-button>

<script type="module">
  const drawer = document.querySelector('gstock-navigation-drawer');
  const input = drawer.querySelector('gstock-input');
  const toggleButton = drawer.parentElement.nextElementSibling;

  toggleButton.addEventListener('click', () => (drawer.open = !drawer.open));
</script>