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.
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.
- 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.
- Hover: Items with links or class name links are hoverable.
- Active: This state is used to make a menu item active.
- 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.
<!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.
<!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