diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 027aa3987..def45a9e9 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -13,6 +13,13 @@
       </div>
       <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-right">
+          <li class="searchbar-wrapper">
+            <div class="navbar-form">
+              <div class="form-group">
+                {% include searchbar.html %}
+              </div>
+            </div>
+          </li>
           {% assign url = page.url %}
           {% for link in site.navigation %}
             <li {% if url == link.url %}class="active"{% endif %}>
diff --git a/docs/_includes/searchbar.html b/docs/_includes/searchbar.html
new file mode 100644
index 000000000..2653919d0
--- /dev/null
+++ b/docs/_includes/searchbar.html
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
+        <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
+              fill-rule="evenodd" />
+    </symbol>
+    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-2" viewBox="0 0 20 20">
+        <path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
+    </symbol>
+</svg>
+
+<form role="search" novalidate="novalidate" class="searchbox sbx-custom">
+    <input onkeyup="updateReset()" type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
+    <button type="submit" class="sbx-custom__submit">
+        <svg role="img" aria-label="Search">
+            <title>Icon Search</title>
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
+        </svg>
+    </button>
+    <button type="reset" class="sbx-custom__reset hide">
+        <svg role="img" aria-label="Reset">
+            <title>Icon Reset</title>
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
+        </svg>
+    </button>
+</form>
+<!--Js: focus search input after reset-->
+<script type="text/javascript">
+    //<![CDATA[
+    document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
+        document.querySelector('.aa-input').focus();
+        this.className += " hide";
+    });
+
+    function updateReset() {
+      var searchbox = document.querySelector('.aa-input');
+      var reset = document.querySelector('.searchbox [type="reset"]');
+      reset.className = "";
+      reset.className = "sbx-custom__reset";
+      if (searchbox.value.length === 0){
+        reset.className += " hide";
+      }
+    }
+
+
+    //]]>
+</script>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index bd9e5245c..0bdb964e0 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -35,7 +35,7 @@
     <link rel="icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
 
     <!-- Fonts -->
-    <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
+    <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,600" />
     <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
 
     <link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
@@ -60,6 +60,18 @@
     </script>
 {% endif %}
 
+    <script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+    <script type="text/javascript">
+      docsearch({
+        apiKey: '25626fae796133dc1e734c6bcaaeac3c',
+        indexName: 'docsearch',
+        inputSelector: '.sbx-custom__input',
+        autocompleteOptions: {
+          debug: false
+        }
+      });
+    </script>
+
   {% include marketing.html %}
 
   {% contentblock site-footer %}
diff --git a/docs/css/_docsearch.scss b/docs/css/_docsearch.scss
new file mode 100644
index 000000000..97fff4401
--- /dev/null
+++ b/docs/css/_docsearch.scss
@@ -0,0 +1,187 @@
+$color-border: #EEE;
+$color-border-light: lighten($color-border, 15%);
+$color-category-header-background: white;
+$color-highlight-header-background: lighten($color-category-header-background, 15%);
+$color-highlight-text: #0064E1;
+$color-selected-background: rgba(#40ADDC,.07);
+$color-selected-text: black;
+$color-left-column-bg: white;
+$color-left-column: #aaa;
+
+$breakpoint-medium: 568px;
+$breakpoint-large: 768px;
+
+$dropdown-min-width-medium: 400px;
+$dropdown-min-width-large: 600px;
+
+// Main autocomplete wrapper
+.aa-dropdown-menu {
+  background-color: #FFF;
+  border: 1px solid #333;
+  border-radius: 4px;
+  font-size: 16px;
+  padding: 4px;
+  text-align: left;
+  top: 38px !important;
+  margin-left: -$dropdown-min-width-medium !important;
+}
+
+// Each suggestion
+.algolia-docsearch-suggestion {
+  color: #333;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+  // Each sub-suggestion
+ .algolia-docsearch-suggestion__secondary {
+    border-top: 1px solid $color-border;
+  }
+
+// Main category headers
+.algolia-docsearch-suggestion--category-header {
+  display: none;
+  border-bottom: solid 1px #ccc;
+  color: #40ADDC;
+  font-weight: 600;
+  padding: 5px 15px;
+  text-align: left;
+  font-size: 1.1em;
+  background-color: white;
+  // Only show it when flaggued as "__main"
+  .algolia-docsearch-suggestion__main & {
+    display: block;
+  }
+}
+
+// Highlight
+.algolia-docsearch-suggestion--highlight {
+  padding: 0;
+  color: #40ADDC;
+  padding: 0 2px;
+  background: rgba(#40ADDC,.1);
+  // Highlight the background in header
+  .algolia-docsearch-suggestion--category-header & {
+    color: inherit;
+    background: $color-highlight-header-background;
+  }
+}
+
+// Selected suggestion
+.aa-cursor .algolia-docsearch-suggestion--content {
+  color: $color-selected-text;
+}
+.aa-cursor .algolia-docsearch-suggestion {
+  background: $color-selected-background;
+}
+
+// The secondary column is hidden on small screens
+.algolia-docsearch-suggestion--subcategory-column {
+  display: none;
+  cursor: default;
+}
+// The text snippet is hidden on small screens
+.algolia-docsearch-suggestion--text {
+  display: none;
+}
+
+.algolia-docsearch-suggestion--content {
+  padding: 3px 5px;
+  width: 100%;
+}
+
+  .algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
+  .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
+    border-top: 0;
+  }
+
+.algolia-docsearch-suggestion--subcategory-inline {
+  display: inline-block;
+  font-weight: 400;
+  &:after {
+    content: " › ";
+  }
+}
+.algolia-docsearch-suggestion--title {
+  display: inline;
+  font-weight: 600;
+}
+
+// Footer
+.algolia-docsearch-footer {
+  border-top: 1px solid $color-border-light;
+  text-align: right;
+  font-size: 12px;
+  padding: 4px 2px 0 0;
+  color: #333;
+
+  .algolia-docsearch-footer--logo {
+    display: inline-block !important;
+    width: 45px;
+    height: 16px;
+    text-indent: 101%;
+    overflow: hidden;
+    white-space: nowrap;
+    background-image: url('data:image/png;base64,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');
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+  }
+}
+
+.aa-dropdown-menu {
+  min-width: $dropdown-min-width-large;
+}
+.algolia-docsearch-suggestion {
+  display: table;
+  width: 100%;
+}
+
+.algolia-docsearch-suggestion__secondary {
+  border-top: 1px solid $color-border-light;
+}
+
+.algolia-docsearch-suggestion--subcategory-column {
+  border-right: 1px solid $color-border-light;
+  background: transparent;
+  color: #999;
+  display: table-cell;
+  overflow: hidden;
+  padding: 5px 7px 5px 10px;
+  text-align: left;
+  font-size: 0.9em;
+  font-family: "Open Sans";
+  text-overflow: ellipsis;
+  vertical-align: top;
+  border-right: 1px solid #ccc;
+
+  width: 160px; // Hardcoded
+  max-width: 160px; // Hardcoded
+  min-width: 160px; // Hardcoded
+}
+
+.algolia-docsearch-suggestion--subcategory-column-text {
+  display: none;
+
+  .algolia-docsearch-suggestion__secondary & {
+    display: block;
+  }
+}
+.algolia-docsearch-suggestion--content {
+  display: table-cell;
+  padding: 5px 10px;
+}
+.algolia-docsearch-suggestion--subcategory-inline {
+  display: none;
+}
+.algolia-docsearch-suggestion--text {
+  display: block;
+  font-weight: 400;
+  font-family: "Open Sans";
+  font-size: .8em;
+  padding: 2px;
+}
+
+.algolia-docsearch-suggestion--wrapper {
+  margin: 10px;
+}
diff --git a/docs/css/_searchbar.scss b/docs/css/_searchbar.scss
new file mode 100644
index 000000000..e268a5d2a
--- /dev/null
+++ b/docs/css/_searchbar.scss
@@ -0,0 +1,188 @@
+$custom:(
+  input-width: 240px,
+  input-height: 36px,
+  border-width: 2px,
+  border-radius: 18px,
+  input-border-color: darken(#1D96C7,10%),
+  input-focus-border-color: #1D96C7,
+  input-background: #091724,
+  input-focus-background: #091724,
+  font-size: 13px,
+  placeholder-color: #AAAAAA,
+  icon-size: 16px,
+  icon-position: left,
+  icon-color: #1D96C7,
+  icon-background: #FFFFFF,
+  icon-background-opacity: 0,
+  icon-clear-size: 12px
+);
+
+@mixin searchbox(
+  $input-width: 500px,
+  $input-height: 40px,
+  $border-width: 1px,
+  $border-radius: 3px,
+  $input-border-color: #ccc,
+  $input-focus-border-color: darken($input-border-color, 15%),
+  $input-background: #fff,
+  $input-focus-background: $input-background,
+  $font-size: 14px,
+  $placeholder-color: #aaa,
+  $icon: 'sbx-icon-search-1',
+  $icon-size: 18px,
+  $icon-position: right,
+  $icon-color: #fff,
+  $icon-background: #3e82f7,
+  $icon-background-opacity: 1,
+  $icon-clear: 'sbx-icon-clear-1',
+  $icon-clear-size: 12px
+) {
+  display: inline-block;
+  position: relative;
+  width: $input-width;
+  height: $input-height;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  &__input {
+    display: inline-block;
+    transition: box-shadow .4s ease, background .4s ease, padding .4s ease;
+    border: 0;
+    border-radius: $border-radius;
+    box-shadow: inset 0 0 0 $border-width $input-border-color;
+    background: $input-background;
+    padding: 0;
+    padding-right: if($icon-position == 'right', $input-height, 0) + $icon-clear-size * 2 + 8px;
+    padding-left: if($icon-position == 'right', $font-size, $input-height + if($icon-background-opacity == 0, 0, 8px));
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    white-space: normal;
+    font-size: $font-size;
+    appearance: none;
+    color: white;
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
+    }
+
+    &:focus,
+    &:active {
+      outline: 0;
+      box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
+      background: $input-focus-background;
+    }
+
+    &::placeholder {
+      color: $placeholder-color;
+    }
+
+  }
+
+  &__submit {
+    position: absolute;
+    top: 0;
+    #{$icon-position}: 0;
+    margin: 0;
+    border: 0;
+    border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
+    background-color: rgba($icon-background, $icon-background-opacity);
+    padding: 0;
+    width: $input-height;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    user-select: none;
+
+    // Helper for vertical alignement of the icon
+    &::before {
+      display: inline-block;
+      margin-right: -4px;
+      height: 100%;
+      vertical-align: middle;
+      content: '';
+    }
+
+    &:hover,
+    &:active {
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+      vertical-align: middle;
+      fill: $icon-color;
+    }
+  }
+
+  &__reset {
+    position: absolute;
+    top: ($input-height - $icon-clear-size) / 2 - 4px;
+    right: if($icon-position == 'right', 8px + $input-height, ($input-height - $icon-clear-size) / 2) - 4px;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    user-select: none;
+
+    &.hide{
+      display: none;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    svg {
+      display: block;
+      margin: 4px;
+      width: $icon-clear-size;
+      height: $icon-clear-size;
+      fill: $icon-color;
+    }
+  }
+
+  &__input:valid ~ &__reset {
+    display: block;
+    animation-name: sbx-reset-in;
+    animation-duration: .15s;
+  }
+
+  @keyframes sbx-reset-in {
+    from {
+      transform: translate3d(-20%, 0, 0);
+      opacity: 0;
+    }
+
+    to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+}
+
+.sbx-custom{
+  @include searchbox($custom...);
+}
+
+.site-header .navbar .navbar-nav > li.searchbar-wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.algolia-autocomplete {
+  display: inline !important;
+}
diff --git a/docs/css/main.scss b/docs/css/main.scss
index ade665a59..6ade1f824 100644
--- a/docs/css/main.scss
+++ b/docs/css/main.scss
@@ -11,3 +11,5 @@
 
 @import "home";
 @import "page";
+@import "searchbar";
+@import "docsearch";
diff --git a/docs/documentation.md b/docs/documentation.md
index 19eabb446..3889e6987 100644
--- a/docs/documentation.md
+++ b/docs/documentation.md
@@ -32,7 +32,10 @@ need to add the following code snippet to your website:
 docsearch({
   apiKey: '<API_KEY>',
   indexName: '<INDEX_NAME>',
-  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
+  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
+  autocompleteOptions: {
+    debug: false
+  }
 });
 </script>
 ```
@@ -93,7 +96,8 @@ If you want to do heavily change the way results are displayed, you might find
 it easier to directly edit the `scss` files in this repository.
 
 [`_variables.scss`][18]
-contains all the color, breakpoints and size definitions while 
+contains all the color, breakpoints and size definitions while
+
 [`_main.scss`][19]
 holds the structure of the display.
 
@@ -113,7 +117,7 @@ results from the Algolia API. As such, you can use any options provided by
 
 You can pass any options to the underlying `autocomplete` instance through
 the`autocompleteOptions` parameter. You will find all `autocomplete` options in
-its [own documentation][22]. 
+its [own documentation][22].
 
 You can also listen to `autocomplete` events through the `.autocomplete`
 property of the `docsearch` instance.
@@ -184,4 +188,3 @@ You will find all Algolia API options in its [own documentation][23]
 [25]: https://jekyllrb.com/
 [26]: https://www.ruby-lang.org/en/
 [27]: http://bundler.io/
-
diff --git a/src/lib/DocSearch.js b/src/lib/DocSearch.js
index ad3521f77..82c47bad3 100644
--- a/src/lib/DocSearch.js
+++ b/src/lib/DocSearch.js
@@ -7,8 +7,8 @@ import version from './version.js';
 import $ from 'npm-zepto';
 
 /**
- * Adds an autocomplete dropdown to an input fields
- * @function documentationSearch
+ * Adds an autocomplete dropdown to an input field
+ * @function DocSearch
  * @param  {string} options.apiKey         Read-only API key
  * @param  {string} options.indexName      Name of the index to target
  * @param  {string} options.inputSelector  CSS selector that targets the input