Semantic-UI Vertical Menu Type

Last Updated : 09 Mar, 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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

The menu is a component that displays a group of items that serve as navigation between one section of the website to another. It is an essential component and is always present in any website in order to make the navigation easy for the user.

By default, the menu is horizontal and displays the items inside it in a horizontal manner i.e. next to each other. In order to create a vertical menu, Semantic UI provides us with a vertical menu class. This class has the ability to make a menu vertical and display its elements stacked on one another.

Semantic UI Vertical Menu Type Class:

vertical menu: This class is used to display the menu in a vertical format.

Syntax:

<div class="ui vertical menu">

Example 1: In the following program, we will be creating a vertical menu by using the given class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Vertical Menu Type</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</head> 
  
<body> 
    <br> 
    <div class="ui green huge header"> 
        GeeksforGeeks 
    </div> 
      
    <div class="ui large header"> 
        Vertical Menu 
    </div> 
    <br> 
      
    <!--Vertical Menu -->
    <div class="ui vertical menu"> 
        <a class="red active item"> 
            Home 
            <i class="home icon"></i> 
        </a> 
        <a class="item"> 
            Add Friend 
            <i class="heart icon"></i> 
        </a> 
        <a class="item"> 
            My Profile 
            <i class="plus icon"></i> 
        </a> 
        <div class="item"> 
            <div class="ui transparent icon input"> 
                <input type="text" placeholder="Search Profile"> 
                <i class="search icon"></i> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In the following program, we will be creating a default menu which will be horizontal and a vertical menu in order to understand the significance of the vertical menu class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Vertical Menu Type</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</head> 
  
<body> 
    <br> 
    <div class="ui green huge header"> 
        GeeksforGeeks 
    </div> 
    <br> 
      
    <div class="ui large header"> 
        Default Horizontal Menu 
    </div> 
      
    <!--Default Menu-->
    <div class="ui menu"> 
        <a class="blue active item"> 
            <i class="futbol icon"></i> 
            Football 
        </a> 
        <a class="item"> 
            <i class="quidditch icon"></i> 
            Quidditch 
        </a> 
        <a class="item"> 
            <i class="table tennis icon"></i> 
            Table Tennis 
        </a> 
    </div> 
    <br> 
    <div class="ui large header">Vertical Menu</div> 
      
    <!--Vertical Menu -->
    <div class="ui vertical menu"> 
        <a class="red active item"> 
            Football 
            <i class="futbol icon"></i> 
        </a> 
        <a class="item"> 
            Quidditch 
            <i class="quidditch icon"></i> 
        </a> 
        <a class="item"> 
            Table Tennis 
            <i class="table tennis icon"></i> 
        </a> 
    </div> 
</body> 
  
</html>