Skip to content

Commit 807aa08

Browse files
hahnbeeleehahnbeelee
authored
Documentation edits made through Mintlify web editor
1 parent 6985439 commit 807aa08

File tree

1 file changed

+120
-35
lines changed

1 file changed

+120
-35
lines changed

‎navigation.mdx‎

Lines changed: 120 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,15 @@ With proper navigation configuration, you can organize your content into a logic
1212

1313
Pages are the most fundamental navigation component.
1414

15-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/pages-light.png" />
16-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/pages-dark.png" />
15+
<img
16+
className="block dark:hidden pointer-events-none"
17+
src="/images/navigation/pages-light.png"
18+
/>
19+
20+
<img
21+
className="hidden dark:block pointer-events-none"
22+
src="/images/navigation/pages-dark.png"
23+
/>
1724

1825
Pages is an array where each entry must be a reference to the path of a [page file](pages).
1926

@@ -36,8 +43,15 @@ Pages is an array where each entry must be a reference to the path of a [page fi
3643

3744
Groups allow you to group your pages. Groups can also be nested within each other.
3845

39-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/groups-light.png" />
40-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/groups-dark.png" />
46+
<img
47+
className="block dark:hidden pointer-events-none"
48+
src="/images/navigation/groups-light.png"
49+
/>
50+
51+
<img
52+
className="hidden dark:block pointer-events-none"
53+
src="/images/navigation/groups-dark.png"
54+
/>
4155

4256
```json
4357
{
@@ -49,7 +63,17 @@ Groups allow you to group your pages. Groups can also be nested within each othe
4963
"quickstart",
5064
{
5165
"group": "Editing",
52-
"pages": ["installation", "editor"]
66+
"pages": [
67+
"installation",
68+
"editor",
69+
{
70+
"group": "Nested group",
71+
"pages": [
72+
"navigation",
73+
"code"
74+
]
75+
}
76+
]
5377
}
5478
]
5579
},
@@ -62,15 +86,20 @@ Groups allow you to group your pages. Groups can also be nested within each othe
6286
}
6387
```
6488

65-
---
66-
6789
## Tabs
6890

6991
Tabs help distinguish between different topics or sections of your
7092
documentation.
7193

72-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/tabs-light.png" />
73-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/tabs-dark.png" />
94+
<img
95+
className="block dark:hidden pointer-events-none"
96+
src="/images/navigation/tabs-light.png"
97+
/>
98+
99+
<img
100+
className="hidden dark:block pointer-events-none"
101+
src="/images/navigation/tabs-dark.png"
102+
/>
74103

75104
```json
76105
"navigation": {
@@ -105,8 +134,15 @@ documentation.
105134

106135
Anchors are another way to section your content. They show up on top of your side navigation.
107136

108-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/anchors-light.png" />
109-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/anchors-dark.png" />
137+
<img
138+
className="block dark:hidden pointer-events-none"
139+
src="/images/navigation/anchors-light.png"
140+
/>
141+
142+
<img
143+
className="hidden dark:block pointer-events-none"
144+
src="/images/navigation/anchors-dark.png"
145+
/>
110146

111147
The configuration is very similar to tabs.
112148

@@ -147,8 +183,15 @@ While not required, we highly recommend that you set an `icon` field as well.
147183

148184
Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown.
149185

150-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/dropdowns-light.png" />
151-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/dropdowns-dark.png" />
186+
<img
187+
className="block dark:hidden pointer-events-none"
188+
src="/images/navigation/dropdowns-light.png"
189+
/>
190+
191+
<img
192+
className="hidden dark:block pointer-events-none"
193+
src="/images/navigation/dropdowns-dark.png"
194+
/>
152195

153196
While not required, we also recommend that you set an icon for each dropdown item.
154197

@@ -183,13 +226,19 @@ While not required, we also recommend that you set an icon for each dropdown ite
183226

184227
---
185228

186-
187229
## Versions
188230

189231
Versions can be leveraged to partition your navigation into different versions.
190232

191-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/versions-light.png" />
192-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/versions-dark.png" />
233+
<img
234+
className="block dark:hidden pointer-events-none"
235+
src="/images/navigation/versions-light.png"
236+
/>
237+
238+
<img
239+
className="hidden dark:block pointer-events-none"
240+
src="/images/navigation/versions-dark.png"
241+
/>
193242

194243
```json
195244
{
@@ -224,28 +273,64 @@ Versions can be leveraged to partition your navigation into different versions.
224273

225274
Languages can be leveraged to partition your navigation into different languages.
226275

227-
<img className="block dark:hidden pointer-events-none" src="/images/navigation/languages-light.png" />
228-
<img className="hidden dark:block pointer-events-none" src="/images/navigation/languages-dark.png" />
276+
<img
277+
className="block dark:hidden pointer-events-none"
278+
src="/images/navigation/languages-light.png"
279+
/>
229280

281+
<img
282+
className="hidden dark:block pointer-events-none"
283+
src="/images/navigation/languages-dark.png"
284+
/>
230285

231286
We currently support the following languages:
232287

233-
<CardGroup>
234-
<Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal />
235-
<Card title="Chinese (cn)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal/>
236-
<Card title="Chinese (zh-Hant)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal/>
237-
<Card title="English (en)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" className="w-6 h-6 my-0" />} horizontal />
238-
<Card title="French (fr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" className="w-6 h-6 my-0" />} horizontal />
239-
<Card title="German (de)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" className="w-6 h-6 my-0" />} horizontal />
240-
<Card title="Indonesian (id)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" className="w-6 h-6 my-0" />} horizontal />
241-
<Card title="Italian (it)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" className="w-6 h-6 my-0" />} horizontal />
242-
<Card title="Japanese (jp)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" className="w-6 h-6 my-0" />} horizontal />
243-
<Card title="Korean (ko)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" className="w-6 h-6 my-0" />} horizontal />
244-
<Card title="Portuguese (pt)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt.png" className="w-6 h-6 my-0" />} horizontal />
245-
<Card title="Portuguese (pt-BR)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" className="w-6 h-6 my-0" />} horizontal />
246-
<Card title="Russian (ru)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" className="w-6 h-6 my-0" />} horizontal />
247-
<Card title="Spanish (es)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" className="w-6 h-6 my-0" />} horizontal />
248-
<Card title="Turkish (tr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" className="w-6 h-6 my-0" />} horizontal />
288+
<CardGroup cols={2}>
289+
<Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal>
290+
291+
</Card>
292+
<Card title="Chinese (cn)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal>
293+
294+
</Card>
295+
<Card title="Chinese (zh-Hant)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal>
296+
297+
</Card>
298+
<Card title="English (en)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" className="w-6 h-6 my-0" />} horizontal>
299+
300+
</Card>
301+
<Card title="French (fr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" className="w-6 h-6 my-0" />} horizontal>
302+
303+
</Card>
304+
<Card title="German (de)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" className="w-6 h-6 my-0" />} horizontal>
305+
306+
</Card>
307+
<Card title="Indonesian (id)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" className="w-6 h-6 my-0" />} horizontal>
308+
309+
</Card>
310+
<Card title="Italian (it)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" className="w-6 h-6 my-0" />} horizontal>
311+
312+
</Card>
313+
<Card title="Japanese (jp)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" className="w-6 h-6 my-0" />} horizontal>
314+
315+
</Card>
316+
<Card title="Korean (ko)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" className="w-6 h-6 my-0" />} horizontal>
317+
318+
</Card>
319+
<Card title="Portuguese (pt)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt.png" className="w-6 h-6 my-0" />} horizontal>
320+
321+
</Card>
322+
<Card title="Portuguese (pt-BR)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" className="w-6 h-6 my-0" />} horizontal>
323+
324+
</Card>
325+
<Card title="Russian (ru)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" className="w-6 h-6 my-0" />} horizontal>
326+
327+
</Card>
328+
<Card title="Spanish (es)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" className="w-6 h-6 my-0" />} horizontal>
329+
330+
</Card>
331+
<Card title="Turkish (tr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" className="w-6 h-6 my-0" />} horizontal>
332+
333+
</Card>
249334
</CardGroup>
250335

251336
```json
@@ -320,6 +405,7 @@ This way, you can create a very complex navigation structure that is easy to man
320405
}
321406
```
322407

408+
323409
```json Tabs
324410
{
325411
"navigation": {
@@ -399,5 +485,4 @@ This way, you can create a very complex navigation structure that is easy to man
399485
}
400486
```
401487

402-
403488
</CodeGroup>

0 commit comments

Comments
 (0)