Skip to content
Related Articles

Related Articles

Semantic-UI Menu

View Discussion
Improve Article
Save Article
  • Last Updated : 25 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”. Menu 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 Types:

Secondary Menu: It is used to create the secondary menu that can adjust its appearance to de-emphasize its contents.

Pointing: It is used to create a relationship with nearby content.

Tabular: It is used to format the menu to show tabular information.

Text: It is used to format any text content under the menu.

Vertical Menu: This type has the ability to make a menu vertical and display its elements stacked on one another.

Pagination: This type has the ability that is used to format a pagination menu to present links to pages of content.

Semantic UI Menu Content:

  • Header: It is used to display the website brand name.
  • Text: It is used to format menu contents as simple text.
  • Input: It is used to place input elements inside the menu.
  • Button: It is used to create a menu that contains a single or multiple buttons.
  • Link Item: It is used to display the menu items as a link.
  • Dropdown Item: It is used to place the dropdown item inside the menu.
  • Pop-up Menu: It is used to display large content or additional menu using a popup menu.
  • Search:  It is used to place a search bar inside the menu.
  • Menu:  It allows each menu item to occupy the same size as the largest one.
  • Sub Menu: It is used to create a dropdown menu inside a given menu.

Semantic UI Menu States :

  • Hover:   Items with links or class name links are hoverable.
  • Active:  This state is used to make a menu item active.

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 menu 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 demonstrates some of the above menu content

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
        rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <h1 class="ui green header">GeeksforGeeks</h1>
    <strong><u>Semantic UI Menu Content</u></strong>
    <br/>
    <strong>Header, Text, Button, Input Menu Content</strong>
    <div class="ui vertical menu">
        <div class="item">
            <div class="header">Menu Header</div>
            <div class="menu">
                <a class="item">Learn</a>
                <a class="item">Code</a>
            </div>
        </div>
        <a class="item">
            <h4 class="ui header">GFG</h4>
             
<p>An example of Menu Text</p>
 
        </a>
        <div class="item">
            <div class="ui button">Menu Button</div>
        </div>
        <div class="item">
            <div class="header">Menu Input</div>
            <div class="ui icon input">
                <input type="text" placeholder="Query Search...">
                <i class="search icon"></i>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Menu Contents

Example 2: The following code demonstrates some of the above menu variations. It also demonstrates the menu states. The first tab is active. All the other menu items are tags and are hoverable.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Table Variation</title>
    <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 , Evenly Divided , Labeled Icon, Huge Menu</strong>
        <div class="ui huge inverted labeled icon green four item menu">
            <a class="active item">
                <i class="tag icon"></i>
                  GeeksforGeeks
            </a>
            <a class="item">
                <i class="thumbs up icon"></i>
                 Learn
            </a>
            <a class="item">
                <i class="code icon"></i>
                 Code
            </a>
            <a class="item">
                <i class="pencil alternate icon"></i>
                  Practice
            </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!