Theme Configuration

Dropdown Component Instructions

"This is a custom dropdown component that you can easily modify according to your preferences using your own CSS classes."

Position: Specify where the dropdown should appear upon opening (e.g., "top", "bottom", "left", "right").

Trigger: Determine how the dropdown will be activated—by "click" or "hover".

Dropdown Class Name: To apply a custom class to the dropdown component, use the prop DropdownClassName="your-class-name" .

Button Class Name: To customize the appearance of the dropdown button, utilize the prop colorclass="your-class-name".

Menu Class Name: For styling the dropdown menu with a unique class, pass it using the prop menuclass="your-class-name".

You can place show the custom dropdown code in the file located at src/components/CustomComponents/Dropdown/Dropdown.tsx.

Example

<Dropdown trigger="click" dropdownClassName="dropdown">
    <DropdownButton colorclass="flex items-center gap-2 btn-green btn" arrow={true}> Green Option</DropdownButton>
    <DropdownMenu menuclass="px-0 item-center">
        {data.map((item: any) => (
          <Link href="#" className={`dropdown-item dropdown-green`} key={item.id}> {item.text}</Link> ))}
    </DropdownMenu>
</Dropdown>

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.