hy-drawer - Vaadin Add-on Directory
A touch-enabled drawer component for the modern web.
# hy-drawer
[](https://badge.fury.io/js/hy-drawer)
**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.
{:.lead}
**hy-drawer** is used by hundreds of sites as part of the [Hydejack]{:.external} Jekyll theme.
**NOTE**: The current version is still a pre-release. The public API may still change in important ways.
{:.message}
[hydejack]: https://hydejack.com/
## Examples
When viewing this page on [webcomponents.org][wcorg], the example below will render as an interactive demo. Otherwise, find the standalone examples below.
[wcorg]: https://www.webcomponents.org/element/qwtel/hy-drawer
```html
☰
```
When viewing this document on GitHub, npm, or elsewhere, you can check out the standalone examples:
* [WebComponent Example](https://qwtel.com/hy-drawer/example/webcomponent/){:.external}
* [jQuery Example](https://qwtel.com/hy-drawer/example/jquery/){:.external}
* [Vanilla JS Example](https://qwtel.com/hy-drawer/example/vanilla/){:.external}
* [Mixin Example](https://qwtel.com/hy-drawer/example/mixin/){:.external}
## License
**hy-drawer** is Open Source but not free.
You may use the component in accordance with the [GPL-3.0 license](licenses/GPL-3.0.md),
but this means you must be willing to release your code under a GPLv3-compatible license in turn.
For cases were this is not acceptable the following commercial licenses available:
| | Personal | Startup | Enterprise |
|:-------------|:------------------:|:------------------:|:------------------:|
| # Developers | 2 | 15 | ∞ |
| License | [Personal][pl] | [Startup][sl] | [Enterprise][el] |
| Price | $29 | $249 | $499 |
| | [**Buy**][bp]{:.gumroad-button} | [**Buy**][bs]{:.gumroad-button} | [**Buy**][be]{:.gumroad-button} |
{:.stretch-table}
[pl]: licenses/personal.md
[sl]: licenses/startup.md
[el]: licenses/enterprise.md
[bp]: https://gumroad.com/l/hy-drawer-personal
[bs]: https://gumroad.com/l/hy-drawer-startup
[be]: https://gumroad.com/l/hy-drawer-enterprise
## Usage
**hy-drawer** can be used in a variety of ways:
* As [Web Component](usage/#web-component), both as *ES6 Module* and *HTML Import*
* As [jQuery](usage/#jquery) plugin
* As [Vanilla](usage/#vanilla) JavaScript class
* As part of [bundled frontend code](usage/#bundlers).
* (Advanced) Possibly as part of your own component hierarchy as [ES6 Mixin][esmixins].
[esmixins]: http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
### Web Component
The Web Component is the preferred way of using **hy-drawer**, but requires [support] in the browser or a [polyfill]. There are multiple ways of including it on your page:
[support]: https://caniuse.com/#feat=template,custom-elementsv1,shadowdomv1,es6-module,imports
[polyfill]: https://github.com/webcomponents/webcomponentsjs
#### Bundled ES6 Module
This is the version that is going to have native support across all major browsers the soonest.
~~~html
Arbitrary content here.