11---
2- title : Tabs, Anchors, Dropdowns
2+ title : " Tabs, Anchors, Dropdowns"
33---
44
55## Tabs
@@ -8,9 +8,15 @@ Tabs help distinguish between different topics or sections of your
88documentation.
99
1010<Frame >
11- <img className = " block dark:hidden rounded-md" src = " /images/tabs-light.png" />
12-
13- <img className = " hidden dark:block rounded-md" src = " /images/tabs-dark.png" />
11+ <img
12+ className = " block dark:hidden rounded-md"
13+ src = " /images/tabs-light.png"
14+ />
15+
16+ <img
17+ className = " hidden dark:block rounded-md"
18+ src = " /images/tabs-dark.png"
19+ />
1420</Frame >
1521
1622``` json docs.json
@@ -45,9 +51,15 @@ documentation.
4551Anchors are another way to section your content. They show up on top of your side navigation.
4652
4753<Frame >
48- <img className = " block dark:hidden rounded-md" src = " /images/anchor-light.png" />
49-
50- <img className = " hidden dark:block rounded-md" src = " /images/anchor-dark.png" />
54+ <img
55+ className = " block dark:hidden rounded-md"
56+ src = " /images/anchor-light.png"
57+ />
58+
59+ <img
60+ className = " hidden dark:block rounded-md"
61+ src = " /images/anchor-dark.png"
62+ />
5163</Frame >
5264
5365The configuration is very similar to the tab configuration. We highly recommend that you set an ` icon ` field as well.
@@ -57,25 +69,13 @@ The icon values are [fontawesome icons](https://fontawesome.com/search)
5769"navigation" : {
5870 "anchors" : [
5971 {
60- "anchor" : " Documentation" ,
61- "icon" : " book-open" ,
62- "pages" : [
63- " quickstart" ,
64- " development" ,
65- " navigation"
66- ]
67- }
68- {
69- "anchor" : " API References" ,
70- "icon" : " sqaure-terminal" ,
71- "pages" : [
72- " api-reference/get" ,
73- " api-reference/post" ,
74- " api-reference/delete"
75- ]
76- }
72+ "anchor" : " Community" ,
73+ "icon" : " people-group" ,
74+ "href" : " https://external-link.com/community"
75+ },
7776 {
7877 "anchor" : " Blog" ,
78+ "icon" : " blog" ,
7979 "href" : " https://external-link.com/blog"
8080 }
8181 ]
@@ -85,13 +85,20 @@ The icon values are [fontawesome icons](https://fontawesome.com/search)
8585## Dropdowns
8686
8787<Frame >
88- <img className = " block dark:hidden rounded-md" src = " /images/dropdowns-light.png" />
89-
90- <img className = " hidden dark:block rounded-md" src = " /images/dropdowns-dark.png" />
88+ <img
89+ className = " block dark:hidden rounded-md"
90+ src = " /images/dropdowns-light.png"
91+ />
92+
93+ <img
94+ className = " hidden dark:block rounded-md"
95+ src = " /images/dropdowns-dark.png"
96+ />
9197</Frame >
9298
9399Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown.
94100We also recommend that you set an icon for each dropdown item ([ options] ( https://fontawesome.com/search ) ).
101+
95102``` json docs.json
96103"navigation" : {
97104 "dropdowns" : [
@@ -121,7 +128,6 @@ We also recommend that you set an icon for each dropdown item ([options](https:/
121128}
122129```
123130
124-
125131## Nested Hierarchy
126132
127133You can use any combination of anchors, tabs, and dropdowns - either one can be nested within each other interchangeably.
@@ -163,6 +169,7 @@ You can use any combination of anchors, tabs, and dropdowns - either one can be
163169}
164170```
165171
172+
166173``` json Top-Level Tabs
167174{
168175 "navigation" : {
@@ -198,4 +205,4 @@ You can use any combination of anchors, tabs, and dropdowns - either one can be
198205}
199206```
200207
201- </CodeGroup >
208+ </CodeGroup >
0 commit comments