Skip to content
Related Articles

Related Articles

Semantic-UI Menu Variations

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 20 May, 2022

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 “Menu”. It is used to display the grouped navigation menu. A Menu is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.

Semantic UI Menu Variations :

  • Fixed: This variation is used to fix the position of menu items in respect of their content.
  • Stackable: This variation is used to display the stackable menu on the mobile screen.
  • Inverted: This variation is used to make the meu items inverted (color-wise).
  • Colored: This variation is used to add color to menu items.
  • Icons: This variation is used to display the icons in the menu items.
  • Labeled Icons: This variation is used to display the menu icons with labels.
  • Fluid: This variation is used to make the menu take the full size of its container.
  • Compact: This variation is used to make the menu take the full size of its container.
  • Evenly Divided: This variation is used to display the menu items in evenly divided space.
  • Attached: This variation is used to attach other content segments with the menu items.
  • Size: This variation is used to make the menu vary in size.
  • Fitted: This variation makes the menu to be fit in the smallest possible space.
  • Borderless: This variation removes the border from the menu items. 

Example 1: The following code also demonstrates some of the above menu variations.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body style="margin:200px">
    <center>
        <h1 class="ui green header">
            GeeksforGeeks
        </h1>
         
        <strong>
            <u>Semantic UI Menu Variations</u>
        </strong>
        <br /><br />
        <strong>
            Colored, Fluid, Evenly Divided, Labeled Icon Menu
        </strong>
 
        <div class="ui fluid four item labeled icon menu">
            <a class="active green item">
                <i class="tag icon"></i>  GeeksforGeeks
            </a>
            <a class="orange item">
                <i class="envelope outline icon"></i>  Mail
            </a>
            <a class="brown item">
                <i class="coffee icon"></i>  Coffee
            </a>
            <a class="blue item">
                <i class="code icon"></i>  Code
            </a>
        </div>
    </center>
 
    <script>
        $('.ui.menu .ui.dropdown').dropdown({
            on: 'hover'
        });
        $('.ui.menu a.item').on('click', function () {
            $(this).addClass('active')
                .siblings().removeClass('active');
        })
    </script>
</body>
 
</html>


Output :

Menu Variations

Example 2: The following code demonstrates the other classes along with using the addClass() and removeClass() methods.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
    </script>
    <script src=
    </script>
</head>
 
<body style="margin:200px">
    <center>
        <h1 class="ui green header">
            GeeksforGeeks
        </h1>
         
        <strong>
            <u>Semantic UI Menu Variations</u>
        </strong><br />
         
        <strong>
            Colored, Evenly Divided,
            Borderless, Huge Menu
        </strong>
         
        <div class="ui huge inverted green
            borderless four item menu">
            <a class="active item"> Item One </a>
            <a class="item"> Item Two </a>
            <a class="item"> Item Three </a>
            <a class="item"> Item Four </a>
        </div>
    </center>
 
    <script>
        $('.ui.menu .ui.dropdown').dropdown({
            on: 'hover'
        });
        $('.ui.menu a.item').on('click', function () {
            $(this).addClass('active')
                .siblings().removeClass('active');
        })        
    </script>
</body>
 
</html>


Output:

Menu Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!