Skip to content

add language dropdown example #895

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.

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

Merged
merged 3 commits into from
Jul 9, 2025
Merged
Changes from all commits
Commits
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
47 changes: 30 additions & 17 deletions components/code-groups.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
---
title: "Code groups"
description: "The CodeGroup component lets you combine code blocks in a display separated by tabs"
description: "Display multiple code examples in one component"
icon: "group"
---

You will need to make [Code Blocks](/code) then add the `<CodeGroup>` component around them. Every Code Block must have a filename because we use the names for the tab buttons.

See below for an example of the end result.
Use the `CodeGroup` component to display multiple code blocks in a tabbed interface, allowing users to compare implementations across different programming languages or see alternative approaches for the same task.

<CodeGroup>

Expand All @@ -28,11 +26,12 @@ class HelloWorld {

</CodeGroup>

## Language dropdown
## Creating code groups

You can replace the tabs in a code group with a dropdown menu to toggle between languages.
To create a code group, wrap multiple code blocks with `<CodeGroup>` tags. Each code block must include a title, which becomes the tab label.

<CodeGroup dropdown>
````mdx
<CodeGroup>

```javascript helloWorld.js
console.log("Hello World");
Expand All @@ -51,17 +50,13 @@ class HelloWorld {
```

</CodeGroup>
````

### Props

<ResponseField name="dropdown" type="boolean">
Whether to show a dropdown button to toggle the code groups with languages as the options.
</ResponseField>
## Language dropdown

<RequestExample>
You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.

````mdx Code Group Example
<CodeGroup>
<CodeGroup dropdown>

```javascript helloWorld.js
console.log("Hello World");
Expand All @@ -80,6 +75,24 @@ class HelloWorld {
```

</CodeGroup>
````

</RequestExample>
````mdx highlight=1
<CodeGroup dropdown>

```javascript helloWorld.js
console.log("Hello World");
```

```python hello_world.py
print('Hello World!')
```

```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
</CodeGroup>
````