npm version

hy-drawer is a touch-enabled drawer component for the modern web. It focuses on providing a fun, natural feel in both the Android and iOS stock browser, while being performant and easy to use. It is the perfect companion for mobile-first web pages and progressive web apps.

A touch-enabled drawer component for the modern web.

hy-drawer can be used in a variety of ways:

  • As Vanilla JavaScript class
  • As jQuery plugin
  • As WebComponent, both as ES6 Module and HTML Import
  • Possibly as part of your own component hierarchy via ES6 Mixin.

The component was initially developed — and can be encountered in the wild — as part of the Hydejack Jekyll theme.

NOTE: The current version is a custom build for Hydejack, which works fine but assumes that you don’t do certain “evil” things, like detaching and re-attaching it to the DOM, etc. This will be fixed in the 1.0.0 release.


hy-drawer is GPL-3.0–licensed. Commercial licenses will be available for cases where this is not suitable.



The most straight-forward way to use hy-drawer is by using the vanilla JS version and load it from a CDN:

<link rel="stylesheet" href="https://unpkg.com/hy-drawer/dist/vanilla/style.css">
<script src="https://unpkg.com/hy-drawer/dist/vanilla/hy-drawer.min.js"></script>
<aside id="drawerEl"><!--content--></aside>
  var Drawer = window.hyDrawer.Drawer;
  var drawer = new Drawer(window.drawerEl, { /* options */ });



The source code is written in a literal programming style, and should be reasonably approachable. However, some knowledge of RxJS is required.

The core functionality is implemented in mixin / index.js, which is used to create the framework-specific versions of the component.


© 2017 Florian Klampfer

Powered by Hydejack v7.5.0