Semantic-UI Dropdown Inline Type
Last Updated :
16 Feb, 2022
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 “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different types of dropdowns. One of them is inline type.
Semantic UI Dropdown Inline Type:
- inline: This class is used to specify the inline type of dropdown.
Semantic UI Dropdown Inline Type: To align your dropdown to particular content on your webpage, an inline type dropdown is required. There may be specific content that is related to the dropdown directly. To make the dropdown near that content inline class is used. There are a lot of scenarios where this might come in handy.
Syntax:
<div class="ui inline dropdown">
... <i class="dropdown icon"></i>
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
To instantiate the dropdown function, we use the following syntax:
<script>
$('.ui.dropdown').dropdown();
</script>
Example 1: This example demonstrates the dropdown inline type using the inline class. The below examples illustrate the 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> This is a
<div class="ui inline dropdown">
<span class="text">Dropdown</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
option 1
</div>
<div class="item">
option 2
</div>
<div class="item">
option 3
</div>
<div class="item">
option 4
</div>
<div class="item">
option 5
</div>
</div>
</div>
inline with text .
</span>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
|
Output:
Inline Dropdown
Example 2: This example demonstrates the dropdown inline type beside a text using the inline class.
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:
Inline Dropdown
Reference: https://semantic-ui.com/modules/dropdown.html#inline
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...