Semantic-UI Dropdown Content
Last Updated :
20 Apr, 2022
Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.
Semantic UI has a bunch of components for user interface design. One of them is “Dropdown”. Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3 types of content Header, divider, and icon. In this article, we will learn about all the dropdown content.
Semantic-UI Dropdown Content:
- Header: This class is used to make the header tag in the dropdown.
- Divider: This class is used to create a dropdown menu that can have dividers to separate any related content.
- Icon: This class is used to add the icon on the dropdown.
- Description: This class is used to set the description of a dropdown item.
- Label: This class is used to create the dropdown label.
- Message: This class is used to create a dropdown message.
- Floated content: This class is used to have dropdown floated content.
- Input: This class is used to create a dropdown that has an input tag.
- Image: This class is used to add an image to the specified dropdown menu.
Syntax:
<div class="ui dropdown button">
<div class="dropdown-classes">
.......
</div>
</div>
Note: Here dropdown classes are the classes that are used above.
Example 1: Below is the example code that demonstrates the use of Dropdown header Content.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown Header Content</p>
</b>
<hr/><br/>
<strong> Dropdown menu with a header: </strong>
<br/><br/>
<div class="ui dropdown button">
<span class="text"> Operating System </span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">
<i class="desktop icon"></i>
Select 1 OS
</div>
<div class="item">Windows</div>
<div class="item">Linux</div>
<div class="item">Android</div>
<div class="item">Mac OS</div>
<div class="item">iOS</div>
</div>
</div>
</div>
<script>
$(".ui.dropdown").dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown header Content
Example 2: Below is the example code that demonstrates the use of Dropdown divider Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown divider Content</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown divider Content</strong>
<br/><br/>
<div class="ui floating labeled icon dropdown button">
<i class="warning icon"></i>
<span class="text">Note</span>
<div class="menu">
<div class="header">
<i class="tags icon"></i>
GeeksforGeeks
</div>
<div class="divider"></div>
<div class="item">
It is a CS Portal
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown divider Content
Example 3: Below is the example code that demonstrates the use of Dropdown icon Content.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic-UI Dropdown Icon Content</strong>
<br><br>
<div class="ui floating labeled icon dropdown button">
<i class="folder icon"></i>
<span class="text">Folder</span>
<div class="menu">
<div class="header">
<i class="... icon"></i>
...
</div>
<div class="divider"></div>
<div class="item">
<i class="... icon"></i>
...
</div>
<div class="item">
<i class="... icon"></i>
...
</div>
<div class="item">
<i class="... icon"></i>
...
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Dropdown icon Content
Example 4: Below is the example code that demonstrates the use of Dropdown description Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Description Content</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Description Content</h3>
<div class="ui floating labeled icon dropdown button">
<i class="globe icon"></i>
<span class="text">Select Country</span>
<div class="menu">
<div class="item">
<span class="description">
10 matches
</span>
<span class="text">
India
</span>
</div>
<div class="item">
<span class="description">
3 matches
</span>
<span class="text">
Worldwide
</span>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
|
Output:
Semantic-UI Dropdown description Content
Example 5: Below is the example code that demonstrates the use of Dropdown label Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown label Content</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown label Content</strong>
<br/><br/>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
<div class="menu">
<div class="header">
Search Anything
</div>
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" name="search"
placeholder="type here....">
</div>
<div class="header">
<i class="tags icon"></i>
GeeksforGeeks
</div>
<div class="item">
<div class="ui green empty circular label"></div>
DSA
</div>
<div class="item">
<div class="ui yellow empty circular label"></div>
OOP's
</div>
<div class="item">
<div class="ui teal empty circular label"></div>
DBMS
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown label Content
Example 6: Below is the example code that demonstrates the use of Dropdown message Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown message Content</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown message Content</strong>
<br/><br/>
<div class="ui floating labeled icon dropdown button">
<i class="warning icon"></i>
<span class="text">Login</span>
<div class="menu">
<div class="ui error message">
<div class="header">Error</div>
<p>Please login to continue!</p>
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown message Content
Example 7: Below is the example code that demonstrates the use of Dropdown floated Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown floated Content</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown floated Content</strong>
<br/><br/>
<div class="ui selection dropdown">
<i class="dropdown icon"></i>
<span class="default text">Select Items</span>
<div class="menu">
<div class="item">
<i class="book left floated icon"></i>
Item-1
</div>
<div class="item">
<i class="phone right floated icon"></i>
Item-2
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown floated Content
Example 8: Below is the example code that demonstrates the use of Dropdown input Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI input Content</title>
<link href=
rel="stylesheet"/>
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI input Content</strong>
<br/><br/>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
<div class="menu">
<div class="header">
GeeksforGeeks
</div>
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="type here....">
</div>
<div class="divider"></div>
<div class="item">
<div class="ui green label"></div>
DSA
</div>
<div class="item">
<div class="ui yellow label"></div>
OOP's
</div>
<div class="item">
<div class="ui teal label"></div>
DBMS
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown input Content
Example 9: Below is the example code that demonstrates the use of Dropdown image Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Image Content</title>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Image Content</h3>
<div class="ui floating labeled icon dropdown button">
<i class="add user icon"></i>
<span class="text">Add a Company name</span>
<div class="menu">
<div class="item">
<img class="ui avatar image"
src=
GeeksforGeeks Logo
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
|
Output:
Semantic-UI Dropdown Image Content
Reference: https://semantic-ui.com/modules/dropdown.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...