Open In App

Semantic-UI Menu States

Improve
Improve
Like Article
Like
Save
Share
Report

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 make your website look more amazing. It uses a class to add CSS to the elements.

The menu is used to group items that are used to navigate the website. Semantic UI provides us with a styled menu. Let’s have a look at various menu states.

Semantic UI Menu States:

  • Hover: This state makes the background of the menu items darker when hovered, indicating an action can be performed by clicking on it.
  • Active: This provides us with an option of making a menu item darker, which can be used to indicate an important element.

Syntax:

<div class="ui menu">
  <div class="active item">
    ...
  </div>
  ...
</div>

Example 1: In the below example, we have created hoverable menu items using the link class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Menu States</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Menu States</h4>
        <hr>
        <br />
        <div class="ui compact menu">
            <div class="link item">
                Home hoverable
            </div>
            <div class="item">
                About
            </div>
            <div class="link item">
                Profile hoverable
            </div>
            <div class="item">
                Contact Us
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Menu States

Semantic-UI Menu States

Example 2: In the below example, we have created a menu with active items.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Menu States</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Menu States</h4>
        <hr>
        <br/>
        <div class="ui compact menu">
            <div class="link active item">
                Home
            </div>
            <div class="link item">
                About
            </div>
            <div class="link active item">
                Profile
            </div>
            <div class="link item">
                Contact Us
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Menu States

Semantic-UI Menu States

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



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads