Add dropdowns (#520)

* Add dropdowns

* add images

Author: hahnbeelee

images/dropdowns-dark.png

@@ -1,5 +1,5 @@
 ---
-title: Tabs and Anchors
+title: Tabs, Anchors, Dropdowns
 ---
 
 ## Tabs
@@ -42,46 +42,89 @@ documentation.
 
 ## Anchors
 
-Anchors are another way to section your content.
+Anchors are another way to section your content. They show up on top of your side navigation.
 
 <Frame>
   <img className="block dark:hidden rounded-md" src="/images/anchor-light.png" />
 
   <img className="hidden dark:block rounded-md" src="/images/anchor-dark.png" />
 </Frame>
 
-The configuration is very similar to the tab configuration.
+The configuration is very similar to the tab configuration. We highly recommend that you set an `icon` field as well.
+The icon values are [fontawesome icons](https://fontawesome.com/search)
 
 ```json docs.json
 "navigation": {
   "anchors": [
+    {
+      "anchor": "Documentation",
+      "icon": "book-open",
+      "pages": [
+        "quickstart",
+        "development",
+        "navigation"
+      ]
+    }
     {
       "anchor": "API References",
+      "icon": "sqaure-terminal",
       "pages": [
         "api-reference/get",
         "api-reference/post",
         "api-reference/delete"
       ]
-    },
+    }
     {
-      "anchor": "SDKs",
+      "anchor": "Blog",
+      "href": "https://external-link.com/blog"
+    }
+  ]
+}
+```
+
+## Dropdowns
+
+<Frame>
+  <img className="block dark:hidden rounded-md" src="/images/dropdowns-light.png" />
+
+  <img className="hidden dark:block rounded-md" src="/images/dropdowns-dark.png" />
+</Frame>
+
+Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown.
+We also recommend that you set an icon for each dropdown item ([options](https://fontawesome.com/search)).
+```json docs.json
+"navigation": {
+  "dropdowns": [
+    {
+      "dropdown": "Documentation",
+      "icon": "book-open",
       "pages": [
-        "sdk/fetch",
-        "sdk/create",
-        "sdk/delete",
+        "quickstart",
+        "development",
+        "navigation"
       ]
-    },
+    }
     {
-      "anchor": "Blog",
+      "dropdown": "API References",
+      "icon": "sqaure-terminal",
+      "pages": [
+        "api-reference/get",
+        "api-reference/post",
+        "api-reference/delete"
+      ]
+    }
+    {
+      "dropdown": "Blog",
       "href": "https://external-link.com/blog"
     }
   ]
 }
 ```
 
+
 ## Nested Hierarchy
 
-You can use both anchors and tabs together - either one can be nested within each other interchangeably.
+You can use any combination of anchors, tabs, and dropdowns - either one can be nested within each other interchangeably.
 
 <CodeGroup>