Skip to content
Related Articles

Related Articles

Semantic-UI Menu Input Content

Improve Article
Save Article
  • Last Updated : 09 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 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.

Semantic UI Menu Input Content Class:

  • input: Create a container with this class and place the input element inside it. Then this item can be placed inside the menu.

Syntax: Add the input content item inside the menu as follows:

<div class="ui menu">
    <div class="item">
        <div class="ui icon input">
            <input type="text" placeholder="...." />
            ...
        </div>
    </div>
</div>

Example: In the following example, we have a menu with an HTML input element.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link href=
          rel="stylesheet"
    />   
</head>
  
<body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1> GeeksforGeeks </h1>
        </div>
        <strong> Semantic UI Menu Input Content </strong>
        <br/>
        <br/>
      </center>
  
      <div class="ui menu">
        <div class="header item">
          GeeksforGeeks
        </div>
        <a
          class="item"
          target="_blank"
        >
          Data Structures
        </a>
        <a
          class="item"
          target="_blank"
        >
          Algorithms
        </a>
        <div class="item">
          <div class="ui icon input">
            <input type="text" placeholder="Find Tutorials  ..." />
            <i class="search icon"></i>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!