Semantic-UI Menu Active State

Last Updated : 29 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar, and dropdowns.

Semantic UI Menu Active State specifies that the item is clicked and active. The button appears in darker contrast to other buttons or links.

Semantic UI Menu Active State Class:

active: Adding this class to the item, the item becomes active.

Syntax: Add the class active to the item as follows:

<div class="link active item">
     Machine Learning
</div>

Example: In the following example, if the user clicks on any link, the item becomes active, and if clicked again, it becomes inactive.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong>Semantic UI Menu Active State</strong> 
            <br /> 
            <br /> 
        </center> 
  
        <div class="ui compact menu"> 
            <div class="header item"> 
                GeeksforGeeks 
            </div> 
            <a class="item" href= 
"https://www.geeksforgeeks.org/data-structures" 
                target="_blank"> 
                Data Structures 
            </a> 
            <a class="item" href= 
"https://www.geeksforgeeks.org/fundamentals-of-algorithms"
                target="_blank"> 
                Algorithms 
            </a> 
            <div class="link item"> 
                Machine Learning 
            </div> 
        </div> 
    </div> 
    <script> 
        $('.item').click(function() { 
            $(this).toggleClass('active') 
        }) 
    </script> 
</body> 
  
</html> 