Clay Dropdown doesn't work

2021-11-02T20:10:09Z

Dear community,

Based on Clay, I should be able to make dropdown work quite easily: https://clayui.com/docs/components/drop-down.html

Here is a sample of code

<div class="fragment_355">
	<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
	<div aria-labelledby="dropdownMenuButton" class="dropdown-menu">
		<ul class="list-unstyled">
			<li><a class="active dropdown-item" href="#1">Selected Option</a></li>
			<li><a class="dropdown-item" href="#3">Normal Option</a></li>
			<li>
				<a class="disabled dropdown-item" href="#4" tabindex="-1">Disabled Option</a>
			</li>
		</ul>
	</div>
</div>

When I put this piece of code into a fragment, I would expect the dropdown to initialize automatically. But nothing happens.

From the console of my Liferay home page (no theme customization), I tried to run the following

$("#dropdownMenuButton").dropdown();

I wanted to check if "dropdown" function was available. But... that's not the case.

Copying the dropdown fragment which comes with Liferay, I noticed that it doesn't use Clay but only native javascript. Which is surprising...

Can you please explain why :

fragment can't use JQuery or Clay libraries
Clay components are not available from the Liferay home page

Thank you.