Skip to content
Related Articles

Related Articles

Semantic-UI Menu Fitted Variation

View Discussion
Improve Article
Save Article
  • 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=
</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=
                target="_blank">
                Data Structures
            </a>
  
            <a class="item" href=
                target="_blank">
                Algorithms
            </a>
            <a class="item" href=
                target="_blank">
                Machine Learning
            </a>
        </div>
    </div>
</body>
  
</html>


Output

Reference: https://semantic-ui.com/collections/menu.html#fitted


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!