Navbar search

Bootstrap 5 Navbar search component

Responsive Navbar search built with Bootstrap 5. Examples of navigation bar searches include arranging the search element or adapting to a dark theme.


Basic example

Place search element within a navbar:

        
            
            <nav class="navbar navbar-light bg-body-tertiary">
              <div class="container-fluid">
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control rounded"
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                  <span class="input-group-text border-0" id="search-addon">
                    <i class="fas fa-search"></i>
                  </span>
                </form>
              </div>
            </nav>
          
        
    

Immediate child elements of .navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.

        
            
            <nav class="navbar navbar-light bg-body-tertiary">
              <div class="container-fluid">
                <a class="navbar-brand">Navbar</a>
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control rounded"
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                  <span class="input-group-text border-0" id="search-addon">
                    <i class="fas fa-search"></i>
                  </span>
                </form>
              </div>
            </nav>
          
        
    

White form for the dark theme.

        
            
            <nav class="navbar navbar-dark bg-dark">
              <div class="container-fluid">
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control rounded"
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="search-addon"
                  />
                  <span class="input-group-text text-white border-0" id="search-addon">
                    <i class="fas fa-search"></i>
                  </span>
                </form>
              </div>
            </nav>