Skip to content
Related Articles

Related Articles

Semantic-UI Header States

Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
Improve Article
Save Article

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 are used to define the state of any dedication header. The default value of the state is active.

Semantic UI Header States class:

  • disabled: This class is used to make the dedicated header disabled or inactive.

Note: There is only one state in the header so the value will be disabled.

Syntax:

<div class="ui Header-Statesheader">
 ....
</div>

The below example illustrates the Semantic-UI Header States:

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <strong>Semantic UI Header States</strong>
        <br><br>
    </center>
    <div class="container"
         style="margin-left: 15px;">
        <strong>Disabled Header:</strong>
        <div class="ui disabled header">
            GeeksforGeeks: A Computer Science
            Portal for Geeks.
        </div>
        <strong>Enabled Header(Default):</strong>
        <div class="ui header">
            GeeksforGeeks: A Computer Science
            Portal for Geeks.
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Header States

Semantic-UI Header States

Reference: https://semantic-ui.com/elements/header.html 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!