Skip to content

Commit 5245f72

Browse files
ethanpalmethanpalm
authored
Document menu in navigation tabs (#946)
* add info about menus * change to h2 * remove line breaks * formatting * update cards
1 parent 20a8e66 commit 5245f72

File tree

1 file changed

+49
-58
lines changed

1 file changed

+49
-58
lines changed

‎navigation.mdx‎

Lines changed: 49 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ Pages is an array where each entry must be a reference to the path of a [page fi
4141
}
4242
```
4343

44-
---
45-
4644
## Groups
4745

4846
Use groups to organize your navigation into sections. Groups can be nested within each other, labeled with tags, and styled with icons.
@@ -140,7 +138,41 @@ documentation.
140138
}
141139
```
142140

143-
---
141+
### Menus
142+
143+
Tabs can have menus that display dropdown navigation items that let users go directly to specific sections within a tab.
144+
145+
```json
146+
"navigation": {
147+
"tabs": [
148+
{
149+
"tab": "API References",
150+
"icon": "square-terminal",
151+
"menu": [
152+
{
153+
"item": "API References",
154+
"icon": "rocket",
155+
"pages": [
156+
"api-reference/get",
157+
"api-reference/post",
158+
"api-reference/delete"
159+
]
160+
},
161+
{
162+
"item": "SDKs",
163+
"icon": "code",
164+
"description": "SDKs are used to interact with the API.",
165+
"pages": [
166+
"sdk/fetch",
167+
"sdk/create",
168+
"sdk/delete",
169+
]
170+
}
171+
]
172+
}
173+
]
174+
}
175+
```
144176

145177
## Anchors
146178

@@ -189,8 +221,6 @@ While not required, we highly recommend that you set an `icon` field as well.
189221
}
190222
```
191223

192-
---
193-
194224
Anchors that strictly contain external links can be achieved using the `global` keyword:
195225

196226
```json
@@ -258,8 +288,6 @@ While not required, we also recommend that you set an icon for each dropdown ite
258288
}
259289
```
260290

261-
---
262-
263291
## Versions
264292

265293
Versions can be leveraged to partition your navigation into different versions.
@@ -301,8 +329,6 @@ Versions can be leveraged to partition your navigation into different versions.
301329
}
302330
```
303331

304-
---
305-
306332
## Languages
307333

308334
Languages can be leveraged to partition your navigation into different languages.
@@ -320,51 +346,20 @@ Languages can be leveraged to partition your navigation into different languages
320346
We currently support the following languages:
321347

322348
<CardGroup cols={2}>
323-
<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>
324-
325-
</Card>
326-
<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>
327-
328-
</Card>
329-
<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>
330-
331-
</Card>
332-
<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>
333-
334-
</Card>
335-
<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>
336-
337-
</Card>
338-
<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>
339-
340-
</Card>
341-
<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>
342-
343-
</Card>
344-
<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>
345-
346-
</Card>
347-
<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>
348-
349-
</Card>
350-
<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>
351-
352-
</Card>
353-
<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>
354-
355-
</Card>
356-
<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>
357-
358-
</Card>
359-
<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>
360-
361-
</Card>
362-
<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>
363-
364-
</Card>
365-
<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>
366-
367-
</Card>
349+
<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 />
350+
<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 />
351+
<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 />
352+
<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 />
353+
<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 />
354+
<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 />
355+
<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 />
356+
<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 />
357+
<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 />
358+
<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 />
359+
<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 />
360+
<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 />
361+
<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 />
362+
<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 />
368363
</CardGroup>
369364

370365
```json
@@ -394,8 +389,6 @@ We currently support the following languages:
394389
}
395390
```
396391

397-
---
398-
399392
## Nesting
400393

401394
You can use any combination of anchors, tabs, and dropdowns. The components can be nested within each other interchangeably to create your desired navigation structure.
@@ -518,8 +511,6 @@ You can use any combination of anchors, tabs, and dropdowns. The components can
518511

519512
</CodeGroup>
520513

521-
---
522-
523514
## Breadcrumbs
524515

525516
Control how breadcrumbs display on individual pages to orient users in your documentation.

0 commit comments

Comments
 (0)