Semantic-UI Header Disabled States

Last Updated : 04 Apr, 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.

Headers in a website are essential as they provide the list of the content that is present below that header. Semantic UI provides us with the header component that helps us in creating headers of various types.

There might be a situation when we want to show that a particular header is inactive at the moment. This can be achieved in Semantic UI with the help of the disabled header class.

Semantic UI Header Disabled Class:

disabled: It is the state of the header that indicates the header is inactive at the moment.

Syntax:

<div class="ui disabled header">
    ...
</div>

Example 1: In the following example, we will be creating a single disabled header.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic UI Header Disabled State</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"> 
        Disabled Header 
    </div> 
    <br> 
      
    <!--Disabled Header-->
    <div class="ui disabled header"> 
        This is a Disabled Header 
    </div> 
</body> 
  
</html> 

Output:

Example 2: In the following example, we will be creating an active header and a disabled header in order to understand the difference between them.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic UI Disabled Header State</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"> 
        Disabled Header 
    </div> 
    <br> 
      
    <div class="ui header"> 
        Active Header 1 
    </div> 
    <div class="ui header"> 
        Active Header 2 
    </div> 
      
    <!--Disabled Header-->
    <div class="ui disabled header"> 
        Disabled Header 
    </div> 
    <div class="ui header"> 
        Active Header 3 
    </div> 
</body> 
  
</html> 