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.
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Menu Size Variation
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 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.
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Menu Size Variation
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 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