Semantic-UI Dropdown Divider Content
Last Updated :
26 Apr, 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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...