Semantic-UI Dropdown Divider Content
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 dropdown allows a user to select a value from a series of options. Semantic UI Dropdown offers us 11 types of dropdowns and 3 types of content Header, divider, and icon. In this article, we will learn about the Divider content.
Semantic UI Dropdown Divider Content is used to create a dropdown menu that contains dividers to separate related content.
Semantic UI Dropdown Divider Content Class:
- divider: This class is used to separate related content.
Syntax:
<div class="ui labeled Divider dropdown button">
<div class="divider"></div>
<div class="item">
...
</div>
...
</div>Example 1: The below example illustrates the Semantic UI Dropdown Divider Content.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" /> <script src= </script></head> <body> <center> <div class="ui container"> <h1 style="color:green">GeeksforGeeks</h1> <h3>Semantic-UI Dropdown Divider Content</h3> <div class="ui floating labeled icon dropdown button"> <span class="text">Company Name</span> <div class="menu"> <div class="divider"></div> <div class="item">GeeksforGeeks</div> <div class="item">GFG</div> <div class="item">gfg</div> </div> </div> </div> <script> $(".ui.dropdown").dropdown(); </script> </center></body> </html> |
Output:
Example 2: The following code also demonstrates the divider class.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" /> <script src= </script></head> <body> <center> <div class="ui container"> <h1 style="color:green">GeeksforGeeks</h1> <h3>Semantic-UI Dropdown Divider Content</h3> <div class="ui floating labeled icon dropdown button"> <i class="add user icon"></i> <span class="text">Add user</span> <div class="menu"> <div class="item">Ram</div> <div class="item">Shyam</div> <div class="divider"></div> <div class="item">Geeta</div> <div class="item">Seeta</div> </div> </div> </div> <script> $(".ui.dropdown").dropdown(); </script> </center></body> </html> |
Output:
Reference: https://semantic-ui.com/modules/dropdown.html#divider
Please Login to comment...