Semantic-UI Menu Header Content

Last Updated : 09 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 Header Content is used to display the website brand name. The header content has different formatting from the rest of the items.

Semantic UI Menu Header Content Classes:

header: The item or menu with header class has the formatting of the header.

Syntax: Add the header class to an item inside the menu as follows:

<div class="ui menu">
    <div class="header item">
        ...
    </div>
    ...
</div>

Example: In the following example, we have a menu with a header item at the starting.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1> GeeksforGeeks </h1> 
            </div> 
            <strong> Semantic UI Menu Header Content </strong> 
            <br /> 
            <br /> 
        </center> 
  
        <div class="ui 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> 
            <a class="item" href= 
"https://www.geeksforgeeks.org/machine-learning/"
                target="_blank"> 
                Machine Learning 
            </a> 
        </div> 
    </div> 
</body> 
  
</html>