Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
The menu is a component that displays a group of items that serve as navigation between one section of the website to another. It is an essential component and is always present in any website in order to make the navigation easy for the user.
Semantic UI Menu offers us so much content as Header, Text, Input, Button, Link Item, Dropdown Item, Menu, Sub Menu. In this article, we will know all about them briefly.
Semantic UI Menu Content:
- Header: Semantic UI Menu Header Content is used to display the website brand name. The header content has different formatting from the rest of the items.
- Text: Semantic UI Menu Text Content is used to format menu contents as simple text. The borders around the menu are removed.
- Input: Semantic UI Menu Input Content is used to place input elements inside the menu. The input element can be used to find articles, blogs, or content on your site.
- Button: The menu button is a menu content class in which the menu contains a button. This class is useful when we want to create a menu that contains a single or multiple buttons that the user can click.
- Link Item: It is used to create a menu item that may contain the link items or items formatted as a link. We can create link items by using an anchor tag or by using a link class.
- Dropdown Item: This is used so the menu item can contain a nested menu in a dropdown.
- Menu: This is used so the menu contains another menu group at the same level as menu items.
- Sub Menu: This is used so the menu item can contain another menu nested inside that acts as a grouped sub-menu.
Syntax:
<div class="ui Menu-Content">
<div class="Menu-Content item">
...
</div>
...
</div>The below example illustrates the Semantic UI Menu Content:
Example 1: In this example, we will use 4 of the menu content.
<!DOCTYPE html><html lang="en">
<head>
<title>Semantic-UI Menu Content</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<div class="ui green header">
GeeksforGeeks
</div>
<strong>Semantic-UI Menu Content</strong>
</center>
<strong>Menu Button:</strong>
<div class="ui menu">
<div class="item">
<div class="ui secondary button">
SignUP
</div>
</div>
</div>
<strong>Menu Header:</strong>
<div class="ui menu">
<div class="ui green header item">
GeeksforGeeks
</div>
</div>
<strong>Menu Text:</strong>
<div class="ui text menu">
<div class="header item">
GeeksforGeeks
</div>
<a class="item" href=
target="_blank">
Data Structures
</a>
</div>
<strong>Menu Input:</strong>
<div class="item">
<div class="ui icon input">
<input type="text"
placeholder="Find Tutorials ..." />
<i class="search icon"></i>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI Menu Content
Example 2: In this example, we will use the rest of the menu content.
<!DOCTYPE html><html lang="en">
<head>
<title>Semantic-UI Menu Content</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<div class="ui green header">GeeksforGeeks</div>
<strong>Semantic-UI Menu Content</strong>
</center>
<strong>Menu Submenu:</strong>
<div class="ui menu">
<div class="ui green header item">
GeeksforGeeks
</div>
<div class="ui submenu">
<div class="ui green header item">
Geeks
</div>
</div>
</div>
<strong>Menu:</strong>
<div class="ui menu">
<div class="header item">
GeeksforGeeks
</div>
<a class="item" href=
target="_blank">
Data Structures
</a>
</div>
<strong>Menu Link:</strong>
<div class="ui fluid seven item menu">
<a href="#" class="item">
GeeksforGeeks
</a>
<a href="#" class="item">
HTML
</a>
<a href="#" class="item">
CSS
</a>
</div>
</body>
</html>
|
Output:
Semantic UI Menu Content
Reference: https://react.semantic-ui.com/collections/menu/