Open In App

Semantic-UI Dropdown Header Content

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

<div class="ui dropdown">
  Title of Dropdown 
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="header">....</div>
    <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 header content representation using the header 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 Header Content</p>
      </b>
      <hr/><br/>
  
      <strong> Dropdown menu with a header: </strong>
      <br/><br/>
  
      <div class="ui dropdown button">
        <span class="text"> Operating System </span>
  
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="header">
            <i class="desktop icon"></i>
            Select 1 OS
          </div>
  
          <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>
    </div>
  
    <script>
      $(".ui.dropdown").dropdown();
    </script>
  </body>
  
</html>


Output:

Dropdown menu with header

Example 2: This is another example which demonstrates the dropdown header content  representation using the header 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 Header Content
      </p></b>
      <hr><br/>
  
      <strong>
          Dropdown menu with a header:
      </strong><br/><br/>
  
      <span>
        Please tell us your favourite Coding Language 
         <i class="code icon"></i
  
        <div class="ui inline dropdown">
          <span class="text">Languages</span>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="header">
             <i class="pencil icon"></i>
             Choose only one
            </div>
  
            <div class="item">C++</div>
            <div class="item">Java</div>
            <div class="item">Python</div>
            <div class="item">Javascript</div>
            <div class="item">Go</div>
            <div class="item">C#</div>
            <div class="item">SQL</div>
          </div
        </div
      </span>
    </div>
  
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:
 

Dropdown menu with header

Reference : https://semantic-ui.com/modules/dropdown.html#header



Last Updated : 23 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads