Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements.
The dropdown allows users to choose one value among multiple values. It is an essential part of a webpage, as it increases interactivity. Semantic UI provides us with a styled dropdown. Let's have a look at various Dropdown Variations.
Semantic UI Dropdown Variations:
- Scrolling: This variation allows the dropdown to be scrollable.
- Compact: This variation removes the minimum width from the dropdown menu.
- Fluid: The dropdown takes the full width of its parent.
- Menu Direction: Semantic UI allows us to specify the direction in which the menu should open.
Syntax:
<div class="ui Dropdown-Variation-class dropdown">
<i class="dropdown icon"></i>
<div class="text">...</div>
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created a scrolling dropdown.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui scrolling dropdown">
<input type="hidden" name="partner">
<div class="default text">Select your lab partner</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Lilly</div>
<div class="item">Jon</div>
<div class="item">Dave</div>
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Chandler</div>
<div class="item">Phoebe</div>
<div class="item">Mike</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
<div class="item">Thomas</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Output:
Example 2: In the below example, we have created a compact dropdown.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui compact selection dropdown">
<input type="hidden" name="partner">
<div class="default text">Select your lab partner</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Lilly</div>
<div class="item">Jon</div>
<div class="item">Dave</div>
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Chandler</div>
<div class="item">Phoebe</div>
<div class="item">Mike</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
<div class="item">Thomas</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Output:
Example 3: In the below example, we have created a fluid dropdown.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui fluid selection dropdown">
<input type="hidden" name="partner">
<div class="default text">Select your lab partner</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Lilly</div>
<div class="item">Jon</div>
<div class="item">Dave</div>
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Chandler</div>
<div class="item">Phoebe</div>
<div class="item">Mike</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
<div class="item">Thomas</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Output:
Example 4: In the below example, we have created a dropdown with a left menu direction.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui floating labeled icon dropdown button">
<i class="dropdown icon"></i>
<span class="text">Select your lab partner</span>
<div class="right menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Male</span>
<div class="right menu">
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Chandler</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Female</span>
<div class="right menu">
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Phoebe</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Output:
