---
title: Dropdowns
description: Dropdowns allow you to hide and reveal content on user interaction. By default, dropdowns are collapsed. This hides content until a user clicks the title...
url: https://docs-v3-preview.elastic.dev/docs-builder/syntax/dropdowns
---

# Dropdowns
Dropdowns allow you to hide and reveal content on user interaction. By default, dropdowns are collapsed. This hides content until a user clicks the title of the collapsible block.

## Basic dropdown

<tab-set>
  <tab-item title="Output">
    <dropdown title="Dropdown Title">
      Dropdown content
    </dropdown>
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    :::{dropdown} Dropdown Title
    Dropdown content
    :::
    ```
  </tab-item>
</tab-set>


## Open by default

You can specify that the dropdown content should be visible by default. Do this by specifying the `open` option. Users can collapse content by clicking on the dropdown title.
<tab-set>
  <tab-item title="Output">
    <dropdown title="Dropdown Title">
      Dropdown content
    </dropdown>
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    :::{dropdown} Dropdown Title
    :open:
    Dropdown content
    :::
    ```
  </tab-item>
</tab-set>


## With applies_to badge

You can add an applies_to badge to the dropdown title by specifying the `:applies_to:` option. This displays a badge indicating which deployment types, versions, or other applicability criteria the dropdown content applies to.
**Source**
```markdown
:::{dropdown} Dropdown Title
:applies_to: stack: ga 9.0
Dropdown content for Stack GA 9.0
:::
```

**Rendering**
<dropdown title="Dropdown Title" applies-to="Elastic Stack: Generally available since 9.0">
  Dropdown content for Stack GA 9.0
</dropdown>

You can also specify multiple definitions in the same `:applies_to:` parameter. For example, `:applies_to: { ece:, ess: }` renders both ECE and ECH badges.

## Multiple applies_to definitions

You can specify multiple `applies_to` definitions using YAML object notation with curly braces `{}`. This is useful when content applies to multiple deployment types or versions simultaneously.
<tab-set>
  <tab-item title="Output">
    <dropdown title="Dropdown Title" applies-to="Elastic Cloud Hosted: Generally available, Elastic Cloud Enterprise: Generally available">
      Dropdown content for ECE and ECH
    </dropdown>
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    :::{dropdown} Dropdown Title
    :applies_to: { ece:, ess: }
    Dropdown content for ECE and ECH
    :::
    ```
  </tab-item>
</tab-set>