Semantic-UI Header Disabled States Last Updated : 04 Apr, 2022 Summarize Comments Improve Suggest changes Share Like Article Like 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 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> Output: Reference: https://semantic-ui.com/elements/header.html Comment More infoAdvertise with us Next Article Semantic-UI Loader Disabled State S shreyasnaphad Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Elements Similar Reads Semantic-UI Loader Disabled State Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create interactive interfaces. It can also be directly used via CDN li 2 min read Semantic-UI Image Disabled State 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. Semantic UI has a bunch of components for user interface design. One of them is “Imag 2 min read Semantic-UI Reveal Disabled State 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. In this article, we are going to learn about Reveal Disabled State.  It is equipped 2 min read Semantic-UI Header States Semantic UI offers many components for users to design their interface. The Header component offers us different types of headers, different types of content holding headers, states of header in different variations. In this article, we will learn about the Semantic UI Header States. These states ar 1 min read Semantic-UI Segment Disabled State 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. Semantic UI has a bunch of components for user interface design. One of them is the S 2 min read Semantic-UI Form Disabled Field State 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. It uses a class to add CSS to the elements. A form is the section of a document that 3 min read Like