Skip to content
Related Articles

Related Articles

Semantic-UI Menu Button Content

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 09 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. 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=
</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=
</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>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!