# CodeGroup

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Several code blocks in one box, one at a time - with tabs, or a menu.

`CodeGroup` puts several code blocks in one box, showing one at a time - the same example in several languages, say. Each block's title is its tab's name.

```js 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!");
  }
}
```

````mdx
<CodeGroup>
```js helloWorld.js
console.log("Hello World");
```
```python hello_world.py
print("Hello World!")
```
```java HelloWorld.java
class HelloWorld { ... }
```
</CodeGroup>
````

A block without a title is named by its language - `JS`, `BASH`. Every [code block option](https://preview.writedocs.io/docs/content/code-blocks/) works in a group: line highlighting, line numbers, icons, and the rest.

## Menu

`dropdown` picks the block with a menu instead of tabs - for many languages, or long names:

```bash cURL
curl https://api.example.com/v1/payments \
  --header "Authorization: Bearer $API_KEY"
```
```js Node.js
const payments = await acme.payments.list();
```
```python Python
payments = acme.payments.list()
```
```ruby Ruby
payments = Acme::Payment.list
```
```go Go
payments, err := client.Payments.List(ctx)
```

````mdx
<CodeGroup dropdown>
```bash cURL
curl https://api.example.com/v1/payments \
  --header "Authorization: Bearer $API_KEY"
```
```js Node.js
const payments = await acme.payments.list();
```
```python Python
payments = acme.payments.list()
```
</CodeGroup>
````

## A single block

A `CodeGroup` with one block shows it as a plain code block, with no tabs:

```bash Install
npm install acme-sdk
```

## Props

**`dropdown`** `boolean` default: `false`

A menu to pick the block, in place of tabs.

To pin a request and its response beside the page instead, use [RequestExample and ResponseExample](https://preview.writedocs.io/docs/content/components/request-response-example/).