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 use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is the Dropdown component. Dropdown is used to show different options to users to choose from. Users can select among them as per their choice. There are different variations, states, and different content representations of dropdowns.
- Semantic-UI Dropdown Types: There are different types of dropdowns based on menu direction and the way it shows up. Users can select among them as per their choice.
- Semantic-UI Dropdown Contents: Semantic-UI Dropdown offers us 8 types of content we have a separate article for that.
- Semantic UI Dropdown States: There are 4 different states available Loading, Error, Active, and Disabled
- Semantic UI dropdown Variations: There are 4 different variation available Scrolling: This variations allows the dropdown to be scrollable, Compact, Fluid, and Menu Direction.
Syntax:
<div class="ui dropdown">
...
<i class="dropdown icon"></i>
<div class="menu">
...
</div>
</div> The below example illustrates different types, variations of dropdowns:
Example 1: Semantic UI Dropdown Inline Type.
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 Inline Type</p>
</b>
<hr>
<br />
<strong>Inline Dropdown:</strong><br /><br />
<span> Please tell us your favourite Operating System
<i class="desktop icon"></i>
<div class="ui inline dropdown">
<span class="text">Choose here</span>
<i class="dropdown icon"></i>
<div class="menu">
<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>
</span>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
|
Output:
Semantic UI Dropdown Inline Type
Example 2: Semantic UI Dropdown Pointing Type.
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 Pointing Type</p>
</b>
<hr><br />
<strong> Choose your road and path:</strong>
<br /><br />
<center>
<div class="ui bottom pointing dropdown button">
<span class="text">North Road</span>
<div class="menu">
<div class="header">Bottom pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<br /><br />
<div class="ui right pointing dropdown button"
style="margin-right:65px;">
<span class="text">Right Road</span>
<div class="menu">
<div class="header">Right pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<div class="ui left pointing dropdown button" s
tyle="margin-left:65px;">
<span class="text">Left Road</span>
<div class="menu">
<div class="header">Left pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<br /><br />
<div class="ui top pointing dropdown button">
<span class="text">South Road</span>
<div class="menu">
<div class="header">Top pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
|
Output:
Semantic UI Dropdown Pointing Type
Example 3: Semantic UI Menu directed dropdown Variation.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<br />
<h2 class="ui header green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Menu Direction
Dropdown Variation</p>
</b>
<br /><br />
<div style="margin-left: 240px;">
<div class="ui floating labeled
icon dropdown button">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Content</span>
<div class="right menu">
<div class="item">Courses
<i class="dropdown icon"></i>
<div class="right menu">
<div class="item">React</div>
<div class="item">Angular</div>
<div class="item">Vue</div>
</div>
</div>
<div class="item">Tests</div>
<div class="item">Articles</div>
</div>
</div>
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">Profile</span>
<div class="left menu">
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">
Security
</span>
<div class="left menu">
<div class="item">
Reset Password
</div>
<div class="item">
Log Out
</div>
</div>
</div>
<div class="item">
Change Photo
</div>
<div class="item">
Update Details
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic UI Menu directed dropdown
Reference: https://semantic-ui.com/modules/dropdown.html