Skip to content
Related Articles

Related Articles

Semantic-UI Menu Size Variation

Improve Article
Save Article
  • Last Updated : 05 Mar, 2022
Improve Article
Save Article

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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.

Semantic-UI Menu Size Variation is used to change the size of the navigation menu. 

Semantic-UI Menu Size Variation Used Classes:

  • mini: It is used to set the menu size to mini.
  • tiny: It is used to set the menu size to tiny.
  • small: It is used to set the menu size to small.
  • large: It is used to set the menu size to large.
  • big: It is used to set the menu size to big.
  • huge: It is used to set the menu size to huge.
  • massive: It is used to set the menu size to massive.

Syntax:

<div class="ui *size menu">
    ...
</div>

Example 1: This example describes the uses of Semantic-UI Menu Size Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Menu Size Variation
    </title>
  
    <link rel="stylesheet" href=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Menu Size Variation</h3>
  
        <h4>Mini Size Menu Variation</h4>
        <div class="ui mini menu">
            <a class="active item">
                GeeksforGeeks
            </a>
            <div class="menu">
                <div class="ui dropdown item">
                    Programming Languages <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item">C</a>
                        <a class="item">C++</a>
                        <a class="item">Java</a>
                        <a class="item">Python</a>
                    </div>
                </div>
            </div>
  
            <div class="menu">
                <div class="ui dropdown item">
                    Web Technology <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item">HTML</a>
                        <a class="item">CSS</a>
                        <a class="item">JavaScript</a>
                        <a class="item">Bootstrap</a>
                    </div>
                </div>
            </div>
  
            <div class="right item">
                <div class="ui icon input">
                    <input type="text" placeholder="Search...">
                </div>
            </div>
        </div>
        <br><br><br>
  
        <h4>Big Size Menu Variation</h4>
        <div class="ui big menu">
            <a class="active item">
                GeeksforGeeks
            </a>
            <div class="menu">
                <div class="ui dropdown item">
                    Programming Languages <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item">C</a>
                        <a class="item">C++</a>
                        <a class="item">Java</a>
                        <a class="item">Python</a>
                    </div>
                </div>
            </div>
  
            <div class="menu">
                <div class="ui dropdown item">
                    Web Technology <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item">HTML</a>
                        <a class="item">CSS</a>
                        <a class="item">JavaScript</a>
                        <a class="item">Bootstrap</a>
                    </div>
                </div>
            </div>
  
            <div class="right item">
                <div class="ui icon input">
                    <input type="text" placeholder="Search...">
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:

Example 2: This example describes the uses of Semantic-UI Menu Size Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Menu Size Variation
    </title>
  
    <link rel="stylesheet" href=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Menu Size Variation</h3>
    </div>
    <br>
  
    <div class="ui container three column grid">
        <div class="column">
            <h4>Mini Size Menu Variation</h4>
            <div class="ui secondary mini vertical menu">
                <a class="active item">
                    GeeksforGeeks
                </a>
  
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    Programming Languages
                    <div class="menu">
                        <div class="header">C</div>
                        <a class="item">C++</a>
                        <a class="item">Java</a>
                        <a class="item">Python</a>
                    </div>
                </div>
  
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    Web Technology
                    <div class="menu">
                        <div class="header">HTML</div>
                        <a class="item">CSS</a>
                        <a class="item">JavaScript</a>
                        <a class="item">Angular.js</a>
                    </div>
                </div>
            </div>
        </div>
  
        <div class="column">
  
            <h4>Small Size Menu Variation</h4>
            <div class="ui secondary small vertical menu">
                <a class="active item">
                    GeeksforGeeks
                </a>
  
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    Programming Languages
                    <div class="menu">
                        <div class="header">C</div>
                        <a class="item">C++</a>
                        <a class="item">Java</a>
                        <a class="item">Python</a>
                    </div>
                </div>
  
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    Web Technology
                    <div class="menu">
                        <div class="header">HTML</div>
                        <a class="item">CSS</a>
                        <a class="item">JavaScript</a>
                        <a class="item">Angular.js</a>
                    </div>
                </div>
            </div>
        </div>
  
        <div class="column">
            <h4>Big Size Menu Variation</h4>
            <div class="ui secondary big vertical menu">
                <a class="active item">
                    GeeksforGeeks
                </a>
  
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    Programming Languages
                    <div class="menu">
                        <div class="header">C</div>
                        <a class="item">C++</a>
                        <a class="item">Java</a>
                        <a class="item">Python</a>
                    </div>
                </div>
  
                <div class="ui dropdown item">
                    <i class="dropdown icon"></i>
                    Web Technology
                    <div class="menu">
                        <div class="header">HTML</div>
                        <a class="item">CSS</a>
                        <a class="item">JavaScript</a>
                        <a class="item">Angular.js</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
  
</html>


Output:

Note: We can change the different size of class names to get the different sizes of navigation menu.

Reference: https://semantic-ui.com/collections/menu.html#size


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!