How to create a navigation menu with an input field inside of it?

In this tutorial, we will learn how to create a navigation menu with an input field inside of it using HTML and CSS? By Apurva Mathur Last updated : July 24, 2023

We may have seen on many of the websites that the navigation menu has an input field. This input field is often used to search the item. Have you wondered how can we do this? How can we provide an input field inside a navigation menu?

Steps to create a navigation menu with an input field inside of it

First let us talk about the HTML code, I've provided all the links under the <nav> tag. This is the tag we use for the navigation menu.
Inside this tag, all the links are given under the anchor tag (a href), with the links we also have to provide one input text field which will be used as a search option.
Now talking about the CSS part, starting with styling <nav> element, here only width and height (optional) properties are specified, it is important to give a width of 100 % else our <nav> element won't take full coverage.
Since all the links are written under the anchor tag so therefore I have given styling by using element name. This major thing is to give display:inline-block as this property will arrange the links properly in a particular format. Rest all the properties are basic ones and you can change their values according to your desire.
If you want to apply any change on hover the links then you can apply the hover property else you can neglect this property.
Now comes the last part, input text-field under this I've applied some basic properties like float property is used to provide the side where you want your text field (right or left).

Example to create a navigation menu with an input field inside of it

<!DOCTYPE html>

<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
      <style>
         nav {
         width: 100%;
         background-color: lightcoral;
         }
         a {
         display: inline-block;
         text-align: center;
         padding: 14px;
         color: black;
         font-size: 20px;
         }
         a:hover {
         background-color: lightsteelblue;
         }
         input[type="text"] {
         float: right;
         padding: 6px;
         margin-top: 8px;
         margin-right: 9px;
         font-size: 20px;
         }
         div{
         font-size: 50px;
         text-align: center;
         font-family: Cambria;
         }
      </style>
   </head>
   
   <body style="margin: 0px">
      <nav>
         <a  href="#">Home</a>
         <a  href="#">Shop</a>
         <a  href="#">About Us</a>
         <a  href="#">Contact Us </a>
         <a  href="#">Our members</a>
         <a  href="#">Donate</a>
         <input type="text" placeholder="you can search here" />
      </nav>
      <div>
         Any content
      </div>
   </body>
</html>

The output of the above example is:

Example: Navigation menu with an input field inside of it

CSS Examples »

Managing Spacing between Words with CSS word-spacing Property

How margin and padding properties work?