Semantic-UI Dropdown Pointing Type

Last Updated : 23 Feb, 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 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 types of dropdowns based on menu direction and the way it shows up. You can add a pointer in the dropdown menu. Let us see this type of dropdown.

Semantic UI Dropdown Pointing Type: Pointer will point the menu opposite to the direction in which it appears. There are different types of positions that a pointer can be placed at. The positions are bottom-left, bottom, bottom-right, left, right, top-left, top, and top-right.

Semantic UI Dropdown Pointing Type Class:

pointing: This class is used to make the menu point in a specific direction.

Syntax:

<div class="pointing dropdown">
    ....     
</div>

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

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

Example 1: This example demonstrates the dropdown pointing type using the pointing class. You can see all the pointer dropdowns in the image below.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    <script src= 
        "https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <b> 
            <p>Semantic UI Dropdown Pointing Type</p> 
        </b> 
        <hr><br /> 
        <strong> Pointing Dropdowns:</strong> 
        <br /><br /> 
        <center> 
            <div class="ui bottom left pointing dropdown button"> 
                <span class="text">Dropdown 1</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Bottom Left pointing dropdown 
                    </div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <div class="ui bottom pointing dropdown button"> 
                <span class="text">Dropdown 2</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Bottom pointing dropdown 
                    </div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <div class="ui bottom right  
                pointing dropdown button"> 
                <span class="text">Dropdown 3</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Bottom Right pointing dropdown 
                    </div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <br /><br /> 
            <div class="ui right pointing dropdown button"
                style="margin-right: 65px;"> 
                <span class="text">Dropdown 4</span> 
                <div class="menu"> 
                    <div class="header">Right pointing dropdown</div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <div class="ui left pointing dropdown button"
                style="margin-left: 65px;"> 
                <span class="text">Dropdown 5</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Left pointing dropdown 
                    </div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <br /><br /> 
            <div class="ui top left pointing dropdown button"> 
                <span class="text">Dropdown 6</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Top left pointing dropdown 
                    </div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <div class="ui top  pointing dropdown button"> 
                <span class="text">Dropdown 7</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Top pointing dropdown</div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
            <div class="ui top right pointing dropdown button"> 
                <span class="text">Dropdown 8</span> 
                <div class="menu"> 
                    <div class="header"> 
                        Top Right pointing dropdown 
                    </div> 
                    <div class="item">Option 1</div> 
                    <div class="item">Option 2</div> 
                    <div class="item">Option 3</div> 
                </div> 
            </div> 
        </center> 
  
        <script> 
            $('.ui.dropdown').dropdown(); 
        </script> 
    </div> 
</body> 
  
</html>

Output:

Pointing dropdowns

Example 2: This example demonstrates the dropdown pointing type using the pointing class. You can see all the pointer dropdowns in the image below.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
         rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <b> 
            <p>Semantic UI Dropdown Pointing Type</p> 
        </b> 
        <hr><br /> 
        <strong> Choose your road and path:</strong> 
        <br /><br /> 
        <center> 
            <div class="ui bottom pointing dropdown button"> 
                <span class="text">North Road</span> 
                <div class="menu"> 
                    <div class="header">Bottom pointing dropdown</div> 
                    <div class="item">Path 1</div> 
                    <div class="item">Path 2</div> 
                </div> 
            </div> 
            <br /><br /> 
            <div class="ui right pointing dropdown button" 
                 style="margin-right:65px;"> 
                <span class="text">Right Road</span> 
                <div class="menu"> 
                    <div class="header">Right pointing dropdown</div> 
                    <div class="item">Path 1</div> 
                    <div class="item">Path 2</div> 
                </div> 
            </div> 
            <div class="ui left pointing dropdown button" s 
                 tyle="margin-left:65px;"> 
                <span class="text">Left Road</span> 
                <div class="menu"> 
                    <div class="header">Left pointing dropdown</div> 
                    <div class="item">Path 1</div> 
                    <div class="item">Path 2</div> 
                </div> 
            </div> 
            <br /><br /> 
            <div class="ui top  pointing dropdown button"> 
                <span class="text">South Road</span> 
                <div class="menu"> 
                    <div class="header">Top pointing dropdown</div> 
                    <div class="item">Path 1</div> 
                    <div class="item">Path 2</div> 
                </div> 
            </div> 
        </center> 
  
        <script> 
            $('.ui.dropdown').dropdown(); 
        </script> 
    </div> 
</body> 
</html>