Recently Browsed

Pages Events

E-commerce Customers

---

Suggested Filter

customers:

All customers list

events:

Latest events in current month

products:

Most popular products

---

Files

iPhone

Antony27 Sep at 10:30 AM

Falcon v1.8.2

John30 Sep at 12:30 PM

---

Members

Anna Karinina

Technext Limited

Antony Hopkins

Brain Trust

Emma Watson

Google

• Wrap your search area with .search-box class.
• Add .search-input to the input field to trigger dropdown on focus.
• Add data-toggle="search" in form element to enable dropdown behavior.
• Add data-dismiss="search" to close dropdown on button click.

<div class="search-box">
  <form class="position-relative" data-toggle="search" data-display="static">
    <input class="form-control search-input" type="search" placeholder="Search..." aria-label="Search" />
    <span class="fas fa-search search-box-icon"></span>
  </form>
  <button class="close" type="button" data-dismiss="search"><span class="fas fa-times"></span></button>
  <div class="dropdown-menu">
    <div class="scrollbar perfect-scrollbar py-3" style="height: 24rem;">
      <h6 class="dropdown-header px-card pt-0 pb-2">Recently Browsed</h6>
      <a class="dropdown-item fs--1 px-card py-1 hover-primary" href="../pages/events.html">
        <div class="d-flex align-items-center">
          <span class="fas fa-circle mr-2 text-300 fs--2"></span>
          <div class="font-weight-normal">Pages <span class="fas fa-chevron-right mx-1 text-500 fs--2" data-fa-transform="shrink-2"></span> Events</div>
        </div>
      </a>
      <a class="dropdown-item fs--1 px-card py-1 hover-primary" href="../e-commerce/customers.html">
        <div class="d-flex align-items-center">
          <span class="fas fa-circle mr-2 text-300 fs--2"></span>
          <div class="font-weight-normal">E-commerce <span class="fas fa-chevron-right mx-1 text-500 fs--2" data-fa-transform="shrink-2"></span> Customers</div>
        </div>
      </a>
      <hr class="border-200" />
      <h6 class="dropdown-header px-card pt-0 pb-2">Suggested Filter</h6>
      <a class="dropdown-item px-card py-1 fs-0" href="../e-commerce/customers.html">
        <div class="d-flex align-items-center"><span class="badge font-weight-medium text-decoration-none mr-2 badge-soft-warning">customers:</span>
          <div class="flex-1 fs--1">All customers list</div>
        </div>
      </a>
      <a class="dropdown-item px-card py-1 fs-0" href="../pages/events.html">
        <div class="d-flex align-items-center"><span class="badge font-weight-medium text-decoration-none mr-2 badge-soft-success">events:</span>
          <div class="flex-1 fs--1">Latest events in current month</div>
        </div>
      </a>
      <a class="dropdown-item px-card py-1 fs-0" href="../e-commerce/product-grid.html">
        <div class="d-flex align-items-center"><span class="badge font-weight-medium text-decoration-none mr-2 badge-soft-info">products:</span>
          <div class="flex-1 fs--1">Most popular products</div>
        </div>
      </a>
      <hr class="border-200" />
      <h6 class="dropdown-header px-card pt-0 pb-2">Files</h6>
      <a class="dropdown-item px-card py-2" href="#!">
        <div class="d-flex align-items-center">
          <div class="file-thumbnail mr-2"><img class="border h-100 w-100 fit-cover rounded-lg" src="../assets/img/products/3-thumb.png" alt="" /></div>
          <div class="flex-1">
            <h6 class="mb-0">iPhone</h6>
            <p class="fs--2 mb-0"><span class="font-weight-semi-bold">Antony</span><span class="font-weight-medium text-600 ml-2">27 Sep at 10:30 AM</span></p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-card py-2" href="#!">
        <div class="d-flex align-items-center">
          <div class="file-thumbnail mr-2"><img class="img-fluid" src="../assets/img/icons/zip.png" alt="" /></div>
          <div class="flex-1">
            <h6 class="mb-0">Falcon v1.8.2</h6>
            <p class="fs--2 mb-0"><span class="font-weight-semi-bold">John</span><span class="font-weight-medium text-600 ml-2">30 Sep at 12:30 PM</span></p>
          </div>
        </div>
      </a>
      <hr class="border-200" />
      <h6 class="dropdown-header px-card pt-0 pb-2">Members</h6>
      <a class="dropdown-item px-card py-2" href="../pages/profile.html">
        <div class="d-flex align-items-center">
          <div class="avatar avatar-l status-online mr-2">
            <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
          </div>
          <div class="flex-1">
            <h6 class="mb-0">Anna Karinina</h6>
            <p class="fs--2 mb-0">Technext Limited</p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-card py-2" href="../pages/profile.html">
        <div class="d-flex align-items-center">
          <div class="avatar avatar-l mr-2">
            <img class="rounded-circle" src="../assets/img/team/2.jpg" alt="" />
          </div>
          <div class="flex-1">
            <h6 class="mb-0">Antony Hopkins</h6>
            <p class="fs--2 mb-0">Brain Trust</p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-card py-2" href="../pages/profile.html">
        <div class="d-flex align-items-center">
          <div class="avatar avatar-l mr-2">
            <img class="rounded-circle" src="../assets/img/team/3.jpg" alt="" />
          </div>
          <div class="flex-1">
            <h6 class="mb-0">Emma Watson</h6>
            <p class="fs--2 mb-0">Google</p>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>