This is a hamburger-menu component. A standard custom web component written in pure vanilla JS, so it could be used in any framework.
With the package you will find a complete functional example (example.html, example.css, example.js)
Please note that, as a developer, you do not need to take any action to control the menu itself, it works automatically as expected.
Use it like any standard tag:
- In html:
<hamburger-menu></hamburger-menu>
- In JS:
document.createElement("hamburger-menu")
-
close-face
: if present<hamburger-menu close-face></hamburger-menu>
, the menu shows 2 crossing bars instead of 3 parallel bars.
-
Define in an element's selector block one or more of the following custom properties:
-
--dim
: menu dimensions in pixels. Default is 32px. -
--bg-color
: menu's background-color. Default is #ddd. -
--bars-color
: color of the menu's bars. Default is #555. -
--border-color
: color of the menu's borders and its box-shadow. Default is #c1c1c1. -
--border-radius
: radius of the menu's borders. Default is 0.25em. -
--transition-time
: when clicked, the menu transitions between open and close states. This custom property defines the transition time. Default is 200ms.
hamburger-menu { --dim: 48px; --bars-color: blue; }
-
-
Or you can reach the following parts of the component:
-
::part(menu)
: the menu is actually adiv
element, so style it as you style anydiv
element. -
::part(bar)
: the bars inside the menu. Bars are actuallydiv
s elements, so style them as you style anydiv
element.
::part(menu) { background-color: lightgray; border-radius: 10px; }
-
-
hamburger-menu-clicked
: This event enables developers to take actions when a user clicks the menu. To learn about the menu's state after the user clicks it, you should readevent.detail
which is a boolean value. If true that means the menu (after being clicked) hasclose-face
attribute (which means it shows 2 crossed bars). Otherwise that means the menu has notclose-face
attribute and it shows 3 parallel bars.document.querySelector("hamburger-menu") .addEventListener("hamburger-menu-clicked", e => { console.log(e.detail); });