@dile/dile-menu-hamburger

A component to implement a full hamburger menu

Usage no npm install needed!

<script type="module">
  import dileDileMenuHamburger from 'https://cdn.skypack.dev/@dile/dile-menu-hamburger';
</script>

README

@dile/dile-menu-hamburger>

Full hamburger menú. It combines the hamburger icon and the app drawer components to make a customized menú.

When the user clicks in the hamburger icon the app drawer menu opens.

Installation

npm i @dile/dile-menu-hamburger

Usage

Import the component.

import '@dile/dile-menu-hamburger/dile-menu-hamburger.js';

Use the component.

<dile-menu-hamburger>
  <nav slot="menu">
    <p><a href="one.html">Link one</a></p>
    <p><a href="two.html">Link two</a></p>
  </nav>
</dile-menu-hamburger>

Properties

  • opened: Boolean property. Defines the state of the component between opened and closed.
  • direction: Defines de animation and direction to open the menú. String property one of "top" or "left". Default is "top".
  • hamburgerAlwaysVisible: Boolean property. If true, makes the hamburger icon allways visible, by seting it's z-index property.

Methods

The component also provides a set of useful methods to controls the component state programmatically.

  • open(): Opens the menu.
  • close(): Closes the menu.
  • toggle(): Changes the state, from open to close or close to open.

Events

  • dile-menu-hamburger-opened: dispatched when the menu opens.
  • dile-menu-hamburger-closed: dispatched when the menu closes.

Customization

You can customize the icons using this CSS Custom properties defined on this components: