Semantic-UI Menu Button Content

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.

The menu button is a menu content class in which the menu contains a button. This class is useful when we want to create a menu that contains a single or multiple buttons that the user can click.

Semantic UI Menu Button Content Class:

button: This class is used to create a button. The menu class is used as its parent in order to create a menu button.

Syntax:

<div class="ui menu">
    <div class="ui button">
        ....
    </div>
    ....
</div>

Example 1: In the following program, we will be creating a single menu button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Semantic-UI Menu Button Content</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">Menu Button</div> 
  <br> 
  <div class="ui menu"> 
    <div class="item"> 
      <div class="ui secondary button"> <!--Menu Button-->
        Register 
      </div>  
    </div> 
   </div> 
 </body> 
</html>

Output:

Example 2: In the following program, we will be creating multiple menu buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Semantic-UI Menu Button Content</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">Menu Button</div> 
  <br> 
  <div class="ui menu"> 
    <div class="item"> 
      <div class="ui red button"> <!--Menu Button-->
       Home 
      </div> 
    </div> 
    <div class="item"> 
        <div class="ui red button"> <!--Menu Button-->
          About 
        </div> 
    </div> 
    <div class="item"> 
        <div class="ui red button"> <!--Menu Button-->
            Contact 
        </div> 
    </div> 
     <div class="item"> 
        <div class="ui red button"> <!--Menu Button-->
              Sign Up 
        </div> 
     </div> 
   </div> 
 </body> 
</html>