Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Bootstrap
  • Tailwind
  • Bulma
  • Foundation
  • Primer
  • Spectre
  • Onsen UI
  • Semantic UI
  • Pure CSS
  • Materialize
  • SASS
  • LESS
  • Blaze UI
  • CSS Frameworks
  • Color Picker
  • CSS
  • CSS Formatter
  • Web Technology
Open In App
Next Article:
Semantic-UI Header Variations
Next article icon

Semantic-UI Header States

Last Updated : 07 Mar, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"           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

Next Article
Semantic-UI Header Variations

S

skyridetim
Improve
Article Tags :
  • Web Technologies
  • CSS
  • Semantic-UI
  • Semantic-UI Elements

Similar Reads

    Semantic UI
    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. Semantic UIWhy Semantic UI?Semantic UI is
    2 min read
    Introduction to Semantic UI
    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.How to use Semantic UI ? Just google CDN semantic UI and you will get the CDN link for
    2 min read

    Semantic-UI Button

    Semantic-UI | Buttons
    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 can be used directly by CDN. There are different types of buttons in Semantic UI.
    3 min read
    Semantic-UI Button Types
    Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. In this article, we will learn about the different kinds of buttons. The butto
    3 min read
    Semantic-UI Button Groups
    Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Group offers categorized button group which allow to group
    2 min read
    Semantic-UI Button Content
    Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Content offers conditions between buttons like delete or Sa
    2 min read
    Semantic-UI Button States
    Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI Button Group offers status of the button, if you want to cr
    1 min read
    Semantic-UI Button Variations
    Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI Button Group offers variation of button, there are Social b
    4 min read
    Semantic-UI Button Group Variations
    Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Group also offers a group variation of buttons, there are I
    3 min read
    Semantic-UI | Container
    Semantic UI open-source framework provides a container which helps to limit content up to greatest width. The framework uses jQuery and CSS to create interactive user interfaces. It is very much similar to bootstrap usage and has different elements for creating page structure of any website. Example
    4 min read

    Semantic-UI Divider

    Semantic-UI | Divider
    Semantic UI is an open-source framework available for building nice and flexible user interfaces using CSS and jQuery. It is very much similar to bootstrap having different elements for website creation. It majorly uses classes to add styles to different elements of HTML. Divider helps in visually d
    2 min read
    Semantic-UI Divider Types
    Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap styling. Top companies like Snapchat, Accenture hav
    4 min read
    Semantic-UI Divider Variations
    Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. It uses predefined CSS and jQuery to incorporate different frameworks. A divider is generally used to divide the conten
    3 min read
    Semantic-UI | Flag
    Semantic UI open-source framework provides classes that are used to show flags of different countries. The framework is very much similar to bootstrap usage and has many elements for creating amazing interactive interfaces for websites. Classes are added to elements for adding styles. Example: The f
    5 min read

    Semantic-UI Header

    Semantic-UI | Header
    Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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. Semantic-UI has really cool headers they can
    3 min read
    Semantic-UI Header Types
    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. Semantic-UI has really cool headers that
    3 min read
    Semantic-UI Header Content
    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 header provides a short summary of content and it's can contain 3 content
    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 Header Variations
    Semantic UI offers many components for users to design their interface. It 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 Variations. Header variations have many v
    3 min read
    Semantic-UI | Icon
    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 very much similar to bootstrap usage to make the website more amazing. It uses classes to add styles to the HTML el
    3 min read
    Semantic-UI Icon Set
    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 and responsive. An icon is a glyph used to represent something else. Semantic UI provi
    3 min read

    Semantic-UI Image

    Semantic-UI | Images
    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.There are different styles of putting imag
    2 min read
    Semantic-UI Image Types
    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 various different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style images. It offers images of d
    3 min read
    Semantic-UI Image 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 various different elements to use to make your website look more amazing. Semantic-UI provides us with a very easy way to style images instead of using long
    2 min read
    Semantic-UI Image Variations
    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
    4 min read
    Semantic-UI Image Groups
    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 provides us with a very easy way to style images. It offers images in dif
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences