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.