diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md
index 090b9e39..2bb8268b 100644
--- a/docs/content/components/navigation.md
+++ b/docs/content/components/navigation.md
@@ -436,18 +436,7 @@ You can have `subnav-search` in the subnav bar.
   <div class="subnav-search float-left">
     <input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
     <!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      class="octicon octicon-search subnav-search-icon"
-      aria-hidden="true"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
-      />
-    </svg>
+    <svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
   </div>
 </div>
 ```
@@ -462,53 +451,16 @@ You can also use a `subnav-search-context` to display search help in a select me
     <a class="subnav-item" href="#url">Item 3</a>
   </nav>
 
-  <div class="float-left ml-3 select-menu js-menu-container js-select-menu subnav-search-context">
-    <button
-      type="button"
-      name="button"
-      class="btn select-menu-button js-menu-target"
-      aria-expanded="false"
-      aria-haspopup="true"
-    >
+  <div class="float-left ml-3 subnav-search-context">
+    <button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
       Filters
+      <span class="dropdown-caret"></span>
     </button>
-    <div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
-      <div class="select-menu-modal">
-        <div class="select-menu-list">
-          <a href="#url" class="select-menu-item js-navigation-item">
-            <div class="select-menu-item-text">
-              Search filter 1
-            </div>
-          </a>
-          <a href="#url" class="select-menu-item js-navigation-item">
-            <div class="select-menu-item-text">
-              Search filter 2
-            </div>
-          </a>
-          <a href="#url" class="select-menu-item js-navigation-item">
-            <div class="select-menu-item-text">
-              Search filter 3
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
   </div>
   <div class="subnav-search float-left">
     <input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
     <!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      class="octicon octicon-search subnav-search-icon"
-      aria-hidden="true"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
-      />
-    </svg>
+    <svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
   </div>
 </div>
 ```
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index f268a89f..c3aa9c2f 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -20,12 +20,12 @@
 .subnav-item {
   position: relative;
   float: left;
-  // stylelint-disable-next-line primer/spacing
-  padding: 6px 14px;
-  font-weight: $font-weight-bold;
+  padding: 6px $spacer-3;
+  // stylelint-disable-next-line primer/typography
+  font-weight: 500;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray;
+  color: $text-gray-dark;
   border: $border;
 
   + .subnav-item {
@@ -46,7 +46,7 @@
     color: $text-white;
     background-color: $bg-blue;
     // stylelint-disable-next-line primer/borders
-    border-color: $blue;
+    border-color: $blue-600;
   }
 
   &:first-child {
@@ -63,13 +63,12 @@
 .subnav-search {
   position: relative;
   // stylelint-disable-next-line primer/spacing
-  margin-left: 10px;
+  margin-left: 12px;
 }
 
 .subnav-search-input {
   width: 320px;
-  // stylelint-disable-next-line primer/spacing
-  padding-left: 30px;
+  padding-left: $spacer-5;
   color: $text-gray;
 }
 
@@ -83,7 +82,7 @@
   left: 8px;
   display: block;
   // stylelint-disable-next-line primer/colors
-  color: darken($gray-300, 4%);
+  color: $gray-400;
   text-align: center;
   pointer-events: none;
 }
@@ -128,5 +127,5 @@
 
 .subnav-spacer-right {
   // stylelint-disable-next-line primer/spacing
-  padding-right: 10px;
+  padding-right: 12px;
 }