Semantic-UI Menu Content
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.
<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.
Example 2: In this example, we will use the rest of the menu content.