Search Bar

Toggle

<a href="#!" class="btn search-bar-toggle">Open Search Bar</a>

Content

You can change default content of search bar.

<div class="search-bar">
  <form action="#!">
    <!-- Header -->
    <a class="search-bar-toggle grey-text text-darken-2" href="#!"><i class="mdi-navigation-close"></i></a>
    
    <!-- Search Input -->
    <div class="input-field">
      <i class="mdi-action-search prefix"></i>
      <input type="text" name="con-search" placeholder="Type to search...">
    </div>
    
    <h4>Serach results for 'Con'</h4>
    
    <hr>
    <!-- Search Results -->
      <div class="search-results">

        <div class="row">
          <div class="col s12 l4">
            <h4>Users</h4>

            <div class="each-result">
              <img src="assets/_con/images/user2.jpg" alt="Felecia Castro" class="circle photo">
              <div class="title">Felecia Castro</div>
              <div class="label">Content Manager</div>
            </div>

            ...
          </div>
          ...
        </div>

    </div>
  </form>
</div>