Semantic-UI Menu States

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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:

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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:

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

Explore