Semantic-UI Dropdown Scrolling Variation

Last Updated : 22 Feb, 2022

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. In this article, we will learn about the Semantic UI Dropdown Scrolling 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 scrolling dropdown is a special case of the dropdown menu where the dropdown menu is scrollable. It is very useful in cases where dropdown items are large in number. To create a scrolling dropdown, we use the scrolling class in the main div. This makes the complete dropdown scrollable, which means the dropdown at first will only show the top 6 choices and on scrolling shows all the items.

Semantic-UI Dropdown Scrolling Variation Class:

scrolling: This class is used to make the dropdown scrollable.

Syntax:

<div class="ui scrolling dropdown">
   ...
</div>

To instantiate the dropdown function, we use the following syntax:

Syntax:

<script>
    $('.ui.dropdown').dropdown();
</script>

Example: Here, is an example depicting normal semantic UI dropdown and scrollable semantic UI dropdown.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Index</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div class="ui dropdown">
        <div class="text">
      Normal DropDown
    </div>
 
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </div>
 
    <div class="ui scrolling dropdown">
        <div class="text">
      Scrolling DropDown
    </div>
 
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </div>
 
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
   
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
 
</html>