Semantic-UI Menu Search Content
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.
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" href= <script src= </script> <script src= </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
Semantic-UI Menu Search Content
Reference: https://semantic-ui.com/collections/menu.html#search
Please Login to comment...