diff --git a/images/dropdowns-dark.png b/images/dropdowns-dark.png
new file mode 100644
index 000000000..af74e63a5
Binary files /dev/null and b/images/dropdowns-dark.png differ
diff --git a/images/dropdowns-light.png b/images/dropdowns-light.png
new file mode 100644
index 000000000..30a96b407
Binary files /dev/null and b/images/dropdowns-light.png differ
diff --git a/navigation/divisions.mdx b/navigation/divisions.mdx
index 41555ba05..c48d1aefa 100644
--- a/navigation/divisions.mdx
+++ b/navigation/divisions.mdx
@@ -1,5 +1,5 @@
---
-title: Tabs and Anchors
+title: Tabs, Anchors, Dropdowns
---
## Tabs
@@ -42,7 +42,7 @@ 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.
@@ -50,38 +50,81 @@ Anchors are another way to section your content.
-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
+
+
+
+
+
+
+
+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.