A dropdown and context menu component built with Web Components.
Installation
bun add @duskmoon-dev/el-menu
Usage
Auto-Register
import '@duskmoon-dev/el-menu/register';
<el-dm-menu>
<el-dm-menu-item>Option 1</el-dm-menu-item>
<el-dm-menu-item>Option 2</el-dm-menu-item>
<el-dm-menu-divider></el-dm-menu-divider>
<el-dm-menu-item>Option 3</el-dm-menu-item>
</el-dm-menu>
Manual Registration
import { ElDmMenu, ElDmMenuItem, register } from '@duskmoon-dev/el-menu';
// Register with default tag names
register();
// Or register with custom tag names
customElements.define('my-menu', ElDmMenu);
customElements.define('my-menu-item', ElDmMenuItem);
Placements
| Placement | Description |
|---|
bottom-start | Below, aligned to start (default) |
bottom-end | Below, aligned to end |
top-start | Above, aligned to start |
top-end | Above, aligned to end |
left | To the left |
right | To the right |
| Attribute | Type | Default | Description |
|---|
open | boolean | false | Whether the menu is open |
anchor | string | - | Selector for anchor element |
placement | string | 'bottom-start' | Menu placement |
| Attribute | Type | Default | Description |
|---|
value | string | - | Item value |
disabled | boolean | false | Disable the item |
| Part | Description |
|---|
menu | The menu container |
items | The items wrapper |
Events
| Event | Detail | Description |
|---|
open | - | Fired when menu opens |
close | - | Fired when menu closes |
select | { value } | Fired when item is selected |
Examples
Basic Dropdown
<el-dm-button id="menuTrigger">Options</el-dm-button>
<el-dm-menu anchor="#menuTrigger">
<el-dm-menu-item value="edit">Edit</el-dm-menu-item>
<el-dm-menu-item value="duplicate">Duplicate</el-dm-menu-item>
<el-dm-menu-divider></el-dm-menu-divider>
<el-dm-menu-item value="delete">Delete</el-dm-menu-item>
</el-dm-menu>
With Disabled Item
<el-dm-menu>
<el-dm-menu-item>Available</el-dm-menu-item>
<el-dm-menu-item disabled>Disabled</el-dm-menu-item>
</el-dm-menu>
Different Placements
<el-dm-menu placement="bottom-end">...</el-dm-menu>
<el-dm-menu placement="top-start">...</el-dm-menu>
<el-dm-menu placement="right">...</el-dm-menu>
Handling Selection
const menu = document.querySelector('el-dm-menu');
menu.addEventListener('select', (e) => {
console.log('Selected:', e.detail.value);
});
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
const menu = document.querySelector('el-dm-menu');
menu.style.left = `${e.clientX}px`;
menu.style.top = `${e.clientY}px`;
menu.open = true;
});
License
MIT