Open In App

Semantic-UI Menu Input Content

Last Updated : 09 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads