Custom-tw-dropdown NPM

readme.md

Custom Tailwind Dropdown Using Vanila Javascript.

Core Features

💡 Light Weight Code
⚡️ Lightning Fast HMR
🛠️ Pure Javascript
📦 Tailwind Custom Dropdown
🔩 Easy to Use

Installation

To use in your projects:

npm install custom-tw-dropdown --save

Usage

import { dropdownEvent, collapseComponent } from 'custom-tw-dropdown'

dropdownEvent(element, placement);

Add In Your HTML File

<div class="relative dropdown">
    <button type="button" class="text-white transition-all duration-200 ease-linear dropdown-toggle btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:focus:ring-custom-400/20 " id="dropdownMenuButton" data-bs-toggle="dropdown">Dropdown Button <i data-lucide="chevron-down" class="inline-block w-4 h-4 ltr:ml-1 rtl:mr-1"></i></button>
    <ul class="absolute z-50 hidden py-2 mt-1 text-left list-none bg-white rounded-md shadow-md dropdown-menu min-w-max dark:bg-zink-400" aria-labelledby="dropdownMenuButton">
        <li>
            <a class="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-50 dark:bg-zink-400 dark:hover:bg-zink-300" href="#!">Action</a>
        </li>
        <li>
            <a class="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-50 dark:bg-zink-400 dark:hover:bg-zink-300" href="#!">Another action</a>
        </li>
        <li>
            <a class="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-50 dark:bg-zink-400 dark:hover:bg-zink-300" href="#!">Something else here</a>
        </li>
        <li class="pt-2 mt-2 border-t dark:border-zink-300/50">
            <a class="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-50 dark:bg-zink-400 dark:hover:bg-zink-300" href="#!">Your Link</a>
        </li>
    </ul>
</div>