A simple animating menu button (web component)

Published on webcomponents.org npm

CircleCI

wc-menu-button

A simple, animating side drawer built as a Web Component

wc-menu-button demo

Demo

Installation

You can integrate wc-menu-button via <script> tag or via NPM.

Via <script> tag

In the <head> of your index.html put a script tag like this:

<script
  type="module"
  src="https://unpkg.com/wc-menu-button/dist/esm/wc-menu-button.min.js"
></script>
<script
  nomodule
  src="https://unpkg.com/wc-menu-button/dist/iife/wc-menu-button.min.js"
></script>

Now you can use the wc-menu-button element anywhere in your html, JSX, template, etc.

Via NPM

npm install wc-menu-button --save

And then you need to import the module before you can use it in your html/jsx/template:

import "wc-menu-button";

Web Component Browser Support

This web component uses HTML templates, the shadow DOM, and custom elements. If you need to polyfill for any of these standards then take a look at the web components polyfill.

API and Customization

Attributes/Properties

  • open
    • Add this attribute to put the menu button in the "open" state.
      • Example: <wc-menu-button open></wc-menu-button>
    • Set the property in Javascript to imperatively toggle the drawer
      • Example: drawer.open = true
    • In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
      • Example: <wc-menu-button open={this.state.isMenuOpen || undefined}></wc-menu-button>

Events

  • opened
    • Raised when the menu button changes to the "open" state.
    • Example: menu.addEventListener("opened", handleOpen())
    • When subscribing in html listen for onopened
      • Ex: <wc-menu-button onopened="handleOpen()">
  • closed
    • Raised when the menu button changes to the not "open" state.
    • Example: menu.addEventListener("closed", handleClose())
    • When subscribing in html listen for onclosed
      • Ex: <wc-menu-button onclosed="handleClose()">

Styling

You can style the wc-menu-button element as you would any regular element, in CSS. A list of supported CSS properties are below, along with the default values.

/* Menu button color is set with CSS variable */
:root {
  --wc-menu-button-color: #000000;
}

/* You only need to set the width, the height is calculated to maintain proportion */
wc-menu-button {
  width: 37px;
}

/* Set to `1.0` if you do not want any hover opacity effect */
wc-menu-button:hover {
  opacity: 0.75;
}

Contribute

This project is built with standard HTML/CSS/TS, no frameworks or special web-component compilers here (for maximum simplicity and minimum size). If you want to learn more about writing custom elements see MDN or this web fundamentals page.

npm install
npm start

This will start a live-server on port localhost:8080. Any changes you make to files in lib/ or any changes to example/index.html should get live reloaded.

Acknowledgements

Thanks to BrowserStack for cross browser testing.

BrowserStack

Install

Link to this version
ImportedReleased 29 April 2019MIT License
Framework Support
Browser Independent
Install with
npm install wc-menu-button"@3.0.1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 3.0.1

Dependencies