Nested Dropdown on Metronic Tailwind
I'm currently working on the Metronic dropdown component and having issues with it. What it does is when I click on the Main Dropdown button, it shows the Main Dropdown content. But after the Main Dropdown is shown and I click on Inner Dropdown button, it dismisses the Main Dropdown content.
I want it to be isolated and trigger the dropdown content. How do I achieve it? Below is the sample code.
<div className="className" data-dropdown="true" data-dropdown-trigger="click">
<button className="dropdown-toggle btn btn-light">
Main Dropdown
</button>
<div className="dropdown-content w-full max-w-56 p-4">
<div className="className" data-dropdown="true" data-dropdown-trigger="click">
<button className="dropdown-toggle btn btn-light">
Inner Dropdown
</button>
<div className="dropdown-content w-full max-w-24 p-4">
<span>Inner Dropdown Content</span>
</div>
</div>
</div>
</div>
Replies (1)
Hi,
Sorry for the late reply.
May I know are you using Metronic 9 HTML/JS dropdown in your react app ?
Why don't use you Metronic 9 official react version with the similar UI ?
Please download the latest Metronic 9 and refer to vite version to launch the full Metronic React app.
Regards,
Sean
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
