Dropdown Menu Component

A simple, customizable, and lightweight JavaScript dropdown menu component. Perfect for integrating clean dropdowns into your websites or apps with minimal setup.

🚀 Features

• Fully dynamic: add items programmatically
• Styled with SCSS, easily themeable
• Interactive behavior (hover, click to lock)
• Built-in support for external links
• Easily embeddable into any DOM element

📦 Installation

You can install the package from npm:

npm install @kessius00/dropdown-menu

Importing the module

import {
  DropDownClass,
  DropDownItem,
  makeDropDownElement,
} from "@kessius00/dropdown-menu";
import "@kessius00/dropdown-menu/styles.css"; // optional if using styles

Creating a dropdown

const dropdown = new DropDownClass("My Dropdown");
dropdown.addItem("Google", "https://google.com");
dropdown.addItem("GitHub", "https://github.com");

const dropDownElement = makeDropDownElement(dropdown);

🛠 Customization

You can override the default styles using your own SCSS or CSS. The following class names are used:

• .dropdown — The container div for the dropdown menu
• .dropbtn — The main button that toggles the menu
• .dropdown-content — The container for dropdown items
• .dropdown-item — Each individual item (anchor/link)
• .dd-active — Applied when the dropdown is "locked open" (e.g., after a click)
• .dd-translucent — Makes the dropdown content semi-transparent (hovered state)
• .dd-hidden — Hides the dropdown content entirely