semantic-ui dropdown menu do not work
You need to initialize your dropdown like so:
$('.ui.dropdown')
.dropdown();
There is more information HERE
One way is JS where you need to initialise script. Other way is to add a class "simple" to dropdown
<div class="ui simple dropdown item">
As it was already mentioned, you can either:
- Initialize your dropdown with Javascript or
- Use
simple
class.
There is one very important difference between those two ways: using simple
class, you do not require Semantic-UI Javascript for your dropdown to work. The simple
class uses :hover
selector.
Please note that using simple
class (not Javascript initialization) won't give you nice dropdown effects.
So the following code will show dropdown menu without Semantic-UI Javascript in your page:
<div class="ui simple dropdown item">
A quick note:
If the dropdown is not displaying and Bootstrap has been loaded on the same page with semantic-ui, then make sure to load the semantic js library after bootstrap.
This occurs because both bootstrap and semantic-ui have the same .dropdown()
method used for displaying dropdown menus. That said, the last library to be loaded between semantic-ui and bootstrap will override all other .dropdown()
methods that exists.