Open In App

Semantic-UI Dropdown Fluid Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that offers us special classes to create stunning and responsive user interfaces. It makes use of jQuery and CSS to create pleasant user interfaces that are very much like bootstrap. It has many classes which are used for styling different elements in the HTML web page structure. 

Semantic UI dropdown is an input element that is used to give users a finite number of choices to select the response from. There are many variations of Semantic UI dropdown such as scrolling, compact, and fluid variations. In this article, we will learn about the Semantic UI Dropdown Fluid Variation.

Semantic-UI Dropdown Fluid Variation: Dropdowns are one of the most frequently used input methods in a webpage. Semantic UI provides dedicated classes for the formatting of the dropdown content. A fluid dropdown is a special case of the dropdown menu where the dropdown element can take the full width of its parent. To create a fluid dropdown, we use the “fluid” class in the main div. The “fluid” class makes the complete dropdown fluid, which means the dropdown and all its elements will take full available space.

Semantic UI Fluid Dropdown Classes:

  • fluid: The fluid class is used to convert the Semantic UI dropdown to Semantic UI fluid dropdown.

Syntax:

<div class="ui fluid selection dropdown">
    <div class="text">Title of Dropdown</div>
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">Dropdown items</div>
            ...
        </div>
    </div>
</div>

Example: Following example covers depicting normal semantic UI dropdown and Fluid semantic UI dropdown.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
    rel="stylesheet" />
</head>
<body>
    <center>
        <h1 style="color: green;">Geeksforgeeks</h1>
        <strong>Semantic UI Dropdown Fluid Variation</strong><br/>
        <div class="ui selection dropdown">
              <div class="text">Semantic UI Normal Dropdown</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item">Item 1</div>
              <div class="item">Item 2</div>
            </div>
        </div>
          <div class="ui fluid selection dropdown">
          <div class="text">Semantic UI Fluid Dropdown</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
          </div>
          </div>
    </center>
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
      </script>
      <script src=
    </script>
      <script
      $('.ui.dropdown').dropdown();
      </script>
</body>
</html>


Output:

Example 2: Following example covers depicting semantic UI Fluid dropdown in a nested vertical menu.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
    rel="stylesheet" />
</head>
<body>
  <center>
    <h1 style="color: green;">Geeksforgeeks</h1>
    <strong>Semantic UI Dropdown Fluid Variation</strong><br/>
    <div class="ui vertical menu">
        <a class="item">Item 1</a>
        <a class="item">Item 2</a>
        <div class="ui item">
          <div class="ui fluid selection dropdown">
            <div class="text">Fluid DropDown</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item">1</div>
              <div class="item">2</div>
            </div>
          </div>
        </div>
      </div>
    </center>
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
      </script>
    <script src=
    </script>
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>


Output:

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



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