Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.
Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar, and dropdowns.
Semantic UI Menu Search Content is used to place a search bar inside the menu. We can place a search bar inside the menu as a single item.
Semantic UI Menu Search Content Classes:
- search: The item with this class can contain an input element and the item is formatted as a search bar.
Syntax: Add an item with search class to the menu as follows:
<div class="ui menu">
<div class="ui search item">
...
</div>
</div>
Example: In the following example, we have a search bar item inside the menu.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<div class="ui container">
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Menu Search Content
</strong>
<br/><br/>
<div class="ui menu">
<div class="ui search item">
<div class="ui icon input">
<input class="prompt"
type="text"
placeholder="Find Tutorials ..."/>
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Output
Reference: https://semantic-ui.com/collections/menu.html#search