# dropdown-menu-element

> Easy to use context menus and button dropdown menus. Lightweight using no UI frameworks.

Latest version **1.3.0** (published 2024-08-29) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install dropdown-menu-element
pnpm add dropdown-menu-element
yarn add dropdown-menu-element
bun add dropdown-menu-element
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2024-08-29 |
| First published | 2024-04-16 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 104.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Aritz Beobide-Cardinal |
| Maintainers | aritz-cracker |
| Keywords | simple, context, menu, right, click, dropdown, components, context menu, web component, dropdown menu, right click, custom element |

## Links

- npm: https://www.npmjs.com/package/dropdown-menu-element
- Repository: https://github.com/ARitz-Cracker/dropdown-menu-element
- Issues: https://github.com/ARitz-Cracker/dropdown-menu-element/issues
- npm.io page: https://npm.io/package/dropdown-menu-element

## Dependencies (1)

- [@aritz-cracker/browser-utils](https://npm.io/package/@aritz-cracker/browser-utils.md) ^1.3.2

## Alternatives

- [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads
- [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads
- [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads
- [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads
- [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2024-08-29
- 1.2.1 — 2024-07-16
- 1.2.0 — 2024-07-11
- 1.1.4 — 2024-06-13
- 1.1.3 — 2024-06-05
- 1.1.2 — 2024-05-16
- 1.1.1 — 2024-05-03
- 1.1.0 — 2024-04-19
- 1.0.0 — 2024-04-16

## README

# dropdown-list-element

_Because defining fancy right-click menus should be easy_

## Features

* Easy to use
* Framework independent
* Can be configured to open on `click` or `contextmenu` events
* Menu items can contain `<input>` elements with first class support for `type="checkbox"` and `type="radio"`
* Full keyboard navigation support
* Animatable

## Installation

You can add the `dropdown-list-element` package as a dependency of your npm project. Just be sure to import it 
somewhere so that the custom elements will be registered.

If you run `npm install && npm run build-standalone` after cloning this repository, you will have a self-contained
version of this library bundled with the one (1) external function depended upon that you can use in a normal
`<script>` tag. (Woah, old school!)

## Defining your menus

Quickstart example:

```html
<div>This div has a context menu</div>
<dropdown-menu linked-elements="div:has(+ #this)">
	<dropdown-menu-item value="1">Option 1</dropdown-menu-item>
	<dropdown-menu-item value="2">Option 2</dropdown-menu-item>
	<dropdown-menu-item value="3">Option 3</dropdown-menu-item>
	<dropdown-menu-item>
		Nested options
		<dropdown-menu-inner>
			<dropdown-menu-item value="4">Option 4</dropdown-menu-item>
			<dropdown-menu-item disabled value="5">Disabled option 5</dropdown-menu-item>
			<dropdown-menu-item value="6">Option 6</dropdown-menu-item>
		</dropdown-menu-inner>
	</dropdown-menu-item>
</dropdown-menu>
```

```js
divWithContextMenu.addEventListener("dropdownSelect", (ev) => {
	const {
		selectedElement, // The <active-dropdown-menu-item> selected.
		selectedElementOriginal, // The `<dropdown-menu-item>` used to create the `selectedElement`.
		selectedValue, // The value of the `value` attribute of the `selectedElementOriginal`, `undefined` if not set.
		dropdownMenu, // The <dropdown-menu> used to make the menu selection.
		triggeringElement // The linked element which triggered the opening of the menu.
	} = ev.detail;
	alert("Option " + selectedValue + " was selected!");
});
```

A more detailed example can be found in the `tests/test.html` file. If you wish to try it out yourself, you must run
`npm run build-standalone` after cloning this repository.

## Documentation

This project is full of tsdoc comments for your contextual viewing pleasure, even with the custom DOM events!

A good place to start would be taking a look at the documentation for the `<dropdown-menu>` element via the 
[`DropdownMenuElement` class](https://docs.aritzcracker.ca/npm/dropdown-menu-element/classes/DropdownMenuElement.html)

## Compatibility notes

Because Apple ["thinks different"](https://github.com/WebKit/standards-positions/issues/97), dropdown menus containing
`<form>` elements will not work properly on Safari at the time of writing. However, `<dropdown-menu>` elements which
are optionally children of `<form>` elements while also being grandparents of `<input>` elements will still work as
intended. As a side-note, An earlier version of this library extended upon `<ul>` and `<li>` elements to define the
menus.

---
_Source: https://npm.io/package/dropdown-menu-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._