@johnkelly-t/dropdown-menu v1.0.1

@johnkelly-t/dropdown-menu

A lightweight, customizable dropdown component built with plain HTML, CSS, and JavaScript. This package provides the essential behavior and basic styling, allowing you to easily extend and personalize the design with your own CSS.

📦 Installation

To install via npm:

npm install @johnkelly-t/dropdown-menu

🛠️ Usage

To use dropdown-menu, recreate the required HTML structure and apply the provided class names to ensure proper functionality. While you can replace the default div elements with other HTML elements, keep in mind that doing so may affect the styling, depending on the element you choose.

Basic HTML Structure

<div class="dropdown-trigger" id="hover">
  Dropdown
  <div class="dropdown-menu">
    <button class="dropdown-item">Item 1</button>
    <div class="dropdown-item">Item 2</div>
    <div class="dropdown-item">Item 3</div>
  </div>
</div>

Javascript Import the setupDropdown function to initialize the dropdown in your project:

import { setupDropdown } from "@johnkelly-t/dropdown-menu"

Pass the dropdown element and the trigger type ("hover" or "click") as arguments to activate the dropdown. Use "hover" for hover-triggered dropdowns, or "click" for click-triggered dropdowns.

let dropdownElement = document.querySelector(".dropdown");
    
setupDropdown(dropdownElement, "hover");

🎨 Customizations

Dropdown Menu alignment

By default, the dropdown menu aligns to the left side of the trigger when the content exceeds the dropdown-trigger width. To change this behavior, you can pass a third argument to setupDropdown() with either "right" or "center" to adjust the alignment.

example

setupDropdown(dropdownElement, "hover", "center")

Result: The dropdown menu will now be centered relative to the dropdown trigger.

Styling

You can easily customize the appearance by overriding the default CSS classes:

• .dropdown-trigger
• .dropdown-menu
• .dropdown-item
• .dropdown-item:hover

Example

.dropdown-trigger {
    color: rgb(8, 89, 143);
}

.dropdown-menu {
    border: 1px solid #5f5f5;
    padding: 2px;
}

.dropdown-item {
    border-radius: 3px;
    color: #555;
}

.dropdown-item:hover {
    background: #acd4e8;
}