Semantic-UI Menu Fitted Variation

Last Updated : 29 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, search bar, and dropdowns.

Semantic UI Menu Fitted Variation allows the menu to be fit in the smallest possible space without affecting the font size or any other formatting. It makes the padding across the width zero.

Semantic UI Menu Fixed Variation Class:

fitted: Add this class to the menu and the menu will become fitted.

Syntax: Add the fitted class to the menu as follows:

<div class="ui fitted menu">
    ...
</div>

Example: In the following example, we have a fitted menu on our site.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong>Semantic UI Menu Fitted Variation</strong> 
            <br /> 
            <br /> 
        </center> 
  
        <div class="ui fitted 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> 