dropdownkojo

A lightweight, reusable, and accessible dropdown menu component built with vanilla JavaScript. Easily integrate multiple dropdowns into your project with clean structure and flexible styling.

Installation

npm install dropdownkojo

Usage

HTML

<div class="dropdown">
 <button class="dropdown-toggle" aria-expanded="false">☰ Menu</button>
 <ul class="dropdown-menu">
   <li><a href="#">Dashboard</a></li>
   <li><a href="#">Projects</a></li>
   <li><a href="#">Settings</a></li>
 </ul>
</div>

Javascript

import Dropdown from 'dropdownkojo';

document.querySelectorAll('.dropdown').forEach(container => {
  new Dropdown(container);
});

CSS (basic styles)

.dropdown-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 8px;
}

.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block;
}

Features

• No dependencies — pure vanilla JavaScript
• Auto-closes when clicking outside
• Fully accessible (aria-expanded)
• Easy to initialize and customize
• Multiple dropdowns supported

Package Contents

dropdown/
├── dropdown.js     # Dropdown component
├── style.css       # Basic styling (optional)
├── index.html      # Example usage
└── package.json