Open In App

Semantic-UI Menu Fitted Variation

Last Updated : 29 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Similar Reads

Semantic-UI Icon Fitted Variation
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 Icon is a glyph that is used to display something else in place of text to save
2 min read
Semantic-UI Checkbox Fitted Variation
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. The checkbox is a great way to take input from the user when the range of inputs accepted i
3 min read
Semantic-UI Divider Variations Fitted Variant
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 Semantic UI divider is generally used to divide the content concisely into different sections. S
3 min read
Semantic-UI Dropdown Menu Direction Variation
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 the Dropdown component. Dropdowns are used to show diff
3 min read
Semantic-UI Menu Stackable Variation
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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friend
2 min read
Semantic-UI Menu Fixed Variation
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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friend
3 min read
Semantic-UI Menu Inverted Variation
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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friend
2 min read
Semantic-UI Menu Fluid Variation
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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friend
2 min read
Semantic-UI Menu Icons Variation
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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friend
2 min read
Semantic-UI Menu Labeled Icon Variation
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 Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friend
2 min read