Semantic-UI Menu Content

Semantic-UI Menu Search Content

Last Updated : 11 Mar, 2022

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=
"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

Semantic-UI Menu Search Content

Reference: https://semantic-ui.com/collections/menu.html#search

Semantic-UI Menu Content

M

manavsarkar07

Improve

Article Tags :

Similar Reads

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 navigatio

Semantic-UI Popup Menu 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 th

Semantic-UI Sub Menu 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 th

Semantic-UI Header Content

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI header provides a short summary of content and it's can contain 3 content

Semantic-UI Reveal Content

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Reveal is a feature in Semantic-UI in which additional content can be displayed inste

Semantic-UI Menu Text 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 th

Semantic-UI Feed Content

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Feed elements are used to document the we

Semantic-UI Menu Input 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 th

Semantic-UI Item Image 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. Semantic UI Item presents a large collection of similar types of data on a web

Semantic-UI List Image Content

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website looks more amazing. It uses a class to add CSS to the elements. Semantic UI List Image Content is used t