Skip to content

feat: menu in navigation tabs #945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 11 commits into from
Closed

feat: menu in navigation tabs #945

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
42423be
add docs on menu
dks333 Jul 24, 2025
c9a32cb
Update navigation.mdx
dks333 Jul 24, 2025
eeae115
trigger build
dks333 Jul 24, 2025
d7286a3
retrigger
dks333 Jul 24, 2025
84e489d
trigger again
dks333 Jul 24, 2025
9715c10
trigger build
ethanpalm Jul 24, 2025
6afedf2
update cards
ethanpalm Jul 24, 2025
e7823bd
Revert "update cards"
ethanpalm Jul 24, 2025
b4e4b1a
update cards
dks333 Jul 24, 2025
f4ab30d
remove page breaks
ethanpalm Jul 24, 2025
91982dd
remove menu
dks333 Jul 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 15 additions & 59 deletions navigation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,6 @@ Pages is an array where each entry must be a reference to the path of a [page fi
}
```

---

## Groups

Use groups to organize your navigation into sections. Groups can be nested within each other, labeled with tags, and styled with icons.
Expand Down Expand Up @@ -140,8 +138,6 @@ documentation.
}
```

---

## Anchors

Anchors are another way to section your content. They show up on top of your side navigation.
Expand Down Expand Up @@ -189,8 +185,6 @@ While not required, we highly recommend that you set an `icon` field as well.
}
```

---

Anchors that strictly contain external links can be achieved using the `global` keyword:

```json
Expand Down Expand Up @@ -258,8 +252,6 @@ While not required, we also recommend that you set an icon for each dropdown ite
}
```

---

## Versions

Versions can be leveraged to partition your navigation into different versions.
Expand Down Expand Up @@ -301,8 +293,6 @@ Versions can be leveraged to partition your navigation into different versions.
}
```

---

## Languages

Languages can be leveraged to partition your navigation into different languages.
Expand All @@ -320,53 +310,23 @@ Languages can be leveraged to partition your navigation into different languages
We currently support the following languages:

<CardGroup cols={2}>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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>

</Card>
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
<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 />
</CardGroup>


```json
{
"navigation": {
Expand Down Expand Up @@ -394,8 +354,6 @@ We currently support the following languages:
}
```

---

## Nesting

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.
Expand Down Expand Up @@ -518,8 +476,6 @@ You can use any combination of anchors, tabs, and dropdowns. The components can

</CodeGroup>

---

## Breadcrumbs

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