semantic-ui dropdown menu do not work

Question

I have been trying to build a menu using Semantic-UI. I can't get the dropdown menus to work at all. I took a copy of the page Menu examples and pulled out everything except the tiered menu and placed it in a separate file. Only the dropdown menu will not function, though there are no errors. Can anyone tell me what I have missed?

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Script-Type" content="text/jscript" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
    <link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">  
    <script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
    <script src="http://semantic-ui.com/javascript/library/history.js"></script>
    <script src="http://semantic-ui.com/javascript/library/easing.js"></script>
    <script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
    <script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
    <script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
    <script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
    <script src="http://semantic-ui.com/javascript/semantic.js"></script>
  </head>
  <body class="menu" >
    <div class="ui tiered menu">
      <div class="menu">
        <a class="active item">
          <i class="users icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="grid layout icon"></i> Browse
        </a>
        <a class="item">
          <i class="mail icon"></i> Messages
        </a>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="ui dropdown item">
            More <i class="icon dropdown"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ui sub menu">
        <a class="active item">Search</a>
        <a class="item">Add</a>
        <a class="item">Remove</a>
      </div>
    </div>

  </body>
</html>

did you try `$(".dropdown").dropdown()` to init? – Cyzanfar Aug 17 '14 at 08:09 — Cyzanfar, Aug 17 '14 at 08:09

Cyzanfar · Accepted Answer · 2017-04-04T04:03:50.793

116

You need to initialize your dropdown like so:

$('.ui.dropdown')
  .dropdown();

There is more information HERE

edited Apr 04 '17 at 04:03

answered Aug 17 '14 at 08:12

Cyzanfar

6,997
9
43
81

score 63 · Answer 2 · answered Nov 05 '14 at 21:06

63

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">

answered Nov 05 '14 at 21:06

Mayank Chandak

731
5
3

1

Thank you for this! Makes prototyping much more easy/quick. Gives you a dropdown menu - nothing more, nothing less. Very nice. – muffinjello Jan 18 '15 at 16:55
2

This works but then clicking on items won't close the dropdown. – Sam R. Jun 07 '16 at 20:53

score 14 · Answer 3 · answered Feb 01 '15 at 23:00

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">

score 5 · Answer 4 · edited Nov 29 '18 at 16:54

5

it worked with me when I added the function line above

    <script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>

edited Nov 29 '18 at 16:54

Kick Buttowski

6,709
13
37
58

answered Nov 03 '18 at 10:30

ibrahim Mohamed

91
1
7

score 5 · Answer 5 · answered Aug 16 '19 at 16:15

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.

score 3 · Answer 6 · edited Oct 23 '17 at 04:15

3

If you initialize with $('.ui.dropdown').dropdown(); also make sure your page references dropdown.js

edited Oct 23 '17 at 04:15

coffee-grinder

26,940
19
56
82

answered Oct 19 '16 at 14:48

kmxr

479
4
4

score 3 · Answer 7 · answered Dec 01 '18 at 13:46

3

if the given answers didn't work for you, make sure you are not using bootstrap along with semantic-ui

answered Dec 01 '18 at 13:46

ahmelq

593
7
11

semantic-ui dropdown menu do not work

7 Answers7

Linked

Related