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.