Skip to content
Related Articles

Related Articles

Semantic-UI Menu Search Content

Improve Article
Save Article
  • Last Updated : 11 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!