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 ways of representing content in the dropdown. You can even add a header to all the options available in the dropdown menu.
Semantic UI Dropdown Header Content: Dropdown menu may need a heading. Let us imagine a scenario where you want the user to know how many choices he can choose among the available options . You can specify that in the heading . This is when header content comes in handy. This is just one scenario .There may be other info you want to share with the user before he proceeds ahead to select .Hence, representation of content is more flexible in the dropdown menu through this.
Semantic-UI Dropdown Header Content Class:
header: This class is used to make the header tag in the dropdown.
<div class="ui dropdown">
Title of Dropdown
<i class="dropdown icon"></i>
To instantiate the dropdown function, we use the following syntax:
Example 1: This example demonstrates the dropdown header content representation using the header class.
Please Login to comment...