@yellowdragoon/dropdown-menu NPM

Dropdown Menu

A simple package that provides a customizable dropdown menu component for your web applications.

Installation

You can install the package using npm:

npm install @yellowdragoon/dropdown-menu

Usage

In your .html file, implement the dropdown (e.g. in your navbar) such as the following:

<div class="navbar">
    <div class="navbar-dropdown">
        <button class="dropdown-button">Dropdown</button>
        <button class="dropdown-child">Option 1</button>
        <button class="dropdown-child">Option 2</button>
        <button class="dropdown-child">Option 3</button>
        <button class="dropdown-child">Option 4</button>
        <button class="dropdown-child">Option 5</button>
    </div>
</div>

Import the 'enableDropDownLogic' function in your js file and call it to add the relevant event listeners to the components:

import { enableDropDownLogic } from '@yellowdragoon/dropdown-menu';

// Call this after your html has loaded! (defer)
enableDropDownLogic();

Finally, add the following styles in your style.css file:

.dropdown-child{
    display: none;
}

.visible{
    display: block;
}

.navbar-dropdown{
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
}

this will ensure your dropdown will work as expected. Add additional classes for more styling, or style .navbar-dropdown/.dropdown-button.