https://github.com/ivteplo/html-context-menu-element
Easily create a custom context menu using HTML custom elements
https://github.com/ivteplo/html-context-menu-element
components context-menu css html html-custom-elements javascript pure-javascript ui-components
Last synced: about 2 months ago
JSON representation
Easily create a custom context menu using HTML custom elements
- Host: GitHub
- URL: https://github.com/ivteplo/html-context-menu-element
- Owner: ivteplo
- License: apache-2.0
- Created: 2024-01-08T13:42:02.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-01T20:23:45.000Z (about 1 year ago)
- Last Synced: 2025-04-03T02:17:02.558Z (12 months ago)
- Topics: components, context-menu, css, html, html-custom-elements, javascript, pure-javascript, ui-components
- Language: JavaScript
- Homepage:
- Size: 138 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Context Menu
An HTML custom element, designed to let you quickly create an easily-customizable context menu.
## Features
- Automatically registers all the needed event listeners.
Simply define a `` element, give it an identifier
and then set the `data-context-menu` attribute to that identifier
for all elements that should use this custom context menu.
- Supports keyboard input.
## Installation
You can install this library from the NPM registry:
```bash
npm install @ivteplo/html-context-menu-element
```
Or you can import it dynamically from a CDN:
```javascript
const { defineElements } = await import("https://unpkg.com/@ivteplo/html-context-menu-element@1.1.0-alpha.3/build/index.js")
```
## Usage
First, we need to define the components in the custom element registry and import the default stylesheet:
```javascript
import { defineElements } from "@ivteplo/html-context-menu-element"
import "@ivteplo/html-context-menu-element/index.css"
defineElements()
```
Then you can define your context menus in the HTML the following way:
```html
Button 1
Button 2
Dropdown
Child button 1
Child button 2
```
Now, if you want to apply the context menu to an element,
set that element’s attribute `data-context-menu` to the ID
of the context menu:
```html
This container has a custom context menu.
```
All the event listeners will be registered automatically.
## API Documentation
You can find the API documentation [in the repository](./documentation/API.md).
## Development
### Prerequisites
You need to have Git, Node.js, Deno, and any browser installed.
### Setup
1. Open your terminal.
2. Clone this repository:
```bash
git clone https://github.com/ivteplo/html-context-menu-element/
```
3. Navigate into the cloned directory:
```bash
cd html-context-menu-element
```
4. Install dependencies:
```bash
npm install
```
5. Start the development server:
```bash
npm run dev
```
6. Build the library:
```bash
npm run build
```
7. Generate the API documentation:
```bash
npm run docs:api
```
8. Happy hacking! 🎉