wc-menu-button

A simple, animating menu web component

This small, simple web component has no dependencies and can be consumed by vanilla JS or any front-end framework. The animations are done via CSS with minimal Javascript.

Lightweight (~1.2kb)
No Dependencies
CSS animated
Portable
Customizable via CSS
Semantic button internally

Example Usage

Listening to open/close events

  <wc-menu-button id="myButton"></wc-menu-button>
  ...
  <script>
    const myMenuIcon = document.querySelector("#myButton");
    if (!!myMenuIcon) {
      myMenuIcon.addEventListener("opened", ev => {
        console.log("menu was opened");
      });
      myMenuIcon.addEventListener("closed", ev => {
        console.log("menu was closed");
      });
    }
  </script>

Custom color

  <style>
    :root {
      --wc-menu-button-color: orange;
    }
  </style>
  ...
  <wc-menu-button></wc-menu-button>

Custom size and hover opacity

  <style>
    wc-menu-button {
      width: 67px;
    }

    wc-menu-button:hover {
      opacity: 1;
    }
  </style>
  ...
  <wc-menu-button></wc-menu-button>