JSPM – vanilla-dropdown-glass@1.0.0

Package Exports

vanilla-dropdown-glass
vanilla-dropdown-glass/src/dropdown.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vanilla-dropdown-glass) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A beautiful, accessible dropdown component with glassmorphism dark theme built in vanilla JavaScript.

Features

Glassmorphism dark theme design
Click or hover triggers
Full accessibility support (ARIA, keyboard navigation)
Responsive design
Multiple dropdowns support
Auto-initialization
Zero dependencies

Installation

npm install vanilla-dropdown

Usage

Basic HTML

<div class="dropdown" data-trigger="click">
  <button class="dropdown-toggle">Menu ▼</button>
  <ul class="dropdown-menu">
    <li><a href="#" data-value="option1">Option 1</a></li>
    <li><a href="#" data-value="option2">Option 2</a></li>
  </ul>
</div>

Include CSS and JS

<link rel="stylesheet" href="node_modules/vanilla-dropdown/src/dropdown.css" />
<script src="node_modules/vanilla-dropdown/src/dropdown.js"></script>

Programmatic Usage

// Auto-initializes all .dropdown elements
// Or create manually:
const dropdown = new VanillaDropdown(element, {
  trigger: 'click', // or 'hover'
  closeOnClickOutside: true,
});

// Get selected values
dropdown.getSelectedValue();
dropdown.getSelectedText();

vanilla-dropdown-glass