Open In App

Semantic-UI Dropdown Menu Direction Variation

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 the Dropdown component. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different variations of dropdowns based on menu direction and the way it shows up. You can add directions to the dropdown menu. Let us see this variation of the dropdown.

Semantic UI Dropdown Menu Direction Variation: You can direct all the menus and sub-menus to open in a specific direction according to the requirement. This variation is used to customize a dropdown to a specific direction.

Semantic UI Dropdown Menu Direction Variation Class:

  • left: This class is used to place the menu in the left direction.
  • right: This class is used to place the menu in the right direction.

Syntax:

<div class="ui dropdown">
    ...
    <i class="dropdown icon"></i>
    <div class="Direction-Variation-Class menu">
            ....
    </div>
</div>

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

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

Example 1: This example demonstrates the menu-directed variation. It displays the menu in both directions. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <br />
        <h2 class="ui header green">
          GeeksforGeeks
        </h2>
        <b>
            <p>Semantic UI Menu Direction 
               Dropdown Variation</p>
  
        </b>
        <br /><br />
        <div style="margin-left: 240px;">
            <div class="ui floating labeled 
                        icon dropdown button">
                <i class="dropdown icon"></i>
                <span class="text">Menu</span>
                <div class="menu">
                    <div class="item">
                        <i class="dropdown icon"></i>
                        <span class="text">Content</span>
                        <div class="right menu">
                            <div class="item">Courses
                                <i class="dropdown icon"></i>
                                <div class="right menu">
                                    <div class="item">React</div>
                                    <div class="item">Angular</div>
                                    <div class="item">Vue</div>
                                </div>
                            </div>
                            <div class="item">Tests</div>
                            <div class="item">Articles</div>
                        </div>
                    </div>
                    <div class="item">
                        <i class="left dropdown icon"></i>
                        <span class="text">Profile</span>
                        <div class="left menu">
                            <div class="item">
                                <i class="left dropdown icon"></i>
                                <span class="text">
                                  Security
                                </span>
                                <div class="left menu">
                                    <div class="item">
                                      Reset Password
                                    </div>
                                    <div class="item">
                                      Log Out
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                              Change Photo
                            </div>
                            <div class="item">
                              Update Details
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    <script>
      $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:

Semantic-UI Dropdown Menu Direction Variation

Semantic-UI Dropdown Menu Direction Variation

Example 2: This example demonstrates the menu-directed variation. It displays all the menus in the right direction. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
            <p>Semantic UI Menu Direction Dropdown Variation</p>
  
        </b><br />
        <div class="ui floating labeled icon dropdown button">
            <i class="dropdown icon"></i>
            <span class="text">Algorithms</span>
            <div class="right menu">
                <div class="item">
                    <i class="dropdown icon"></i>
                    <span class="text">Trees</span>
                    <div class="right menu">
                        <div class="item">Inorder</div>
                        <div class="item">Preorder</div>
                        <div class="item">Postorder</div>
                    </div>
                </div>
                <div class="item">
                    <i class="dropdown icon"></i>
                    <span class="text">Arrays</span>
                    <div class="right menu">
                        <div class="item">
                            <i class="dropdown icon"></i>
                            <span class="text">
                                Sorts
                            </span>
                            <div class="right menu">
                                <div class="item">
                                  Bubble Sort
                                </div>
                                <div class="item">
                                  Quick Sort
                                </div>
                                <div class="item">
                                  Insertion Sort
                                </div>
                            </div>
                        </div>
                        <div class="item">
                          Binary Search
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
      $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:

Semantic-UI Dropdown Menu Direction Variation

Semantic-UI Dropdown Menu Direction Variation

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



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