# Dropdowns

### Simple Dropdowns

{% tabs %}
{% tab title="Button Dropdown" %}
![](/files/-LotUFh0ql1keyW2xwKc)

```markup
<div class="dropdown d-inline-block">

    <!-- Dropdown Button -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Link Dropdown" %}
![](/files/-LotUHmcydjrH3EisJR6)

```markup
<div class="dropdown d-inline-block">

    <!-- Dropdown Link -->
    <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
        link</a>
    <!-- /dropdown link -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}
{% endtabs %}

### Various Color Dropdowns

{% tabs %}
{% tab title="Primary" %}
![](/files/-LotVRqe3fKewSTU3KXj)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Secondary" %}
![](/files/-LotVVX0jsN2uAgQZumw)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Secondary
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Success" %}
![](/files/-LotVYXc1nfsfJ-H22ea)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Success
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Warning" %}
![](/files/-LotVaJOqebm_LHJD7Pb)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Warning
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Danger" %}
![](/files/-LotVcklAEfgG4TosKa4)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Danger
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Light" %}
![](/files/-LotVexFXMu6yB1wz4kh)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Light
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Dark" %}
![](/files/-LotVkZ1wE5xCk28jAhd)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dark
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}
{% endtabs %}

### Sizes

{% tabs %}
{% tab title="Default" %}
![](/files/-LotYaze4KEOaaWP7--Y)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Large" %}
![](/files/-LotYdam5ms6qrnDQIbY)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Small" %}
![](/files/-LotYfYC-i_twNqKSZvg)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}
{% endtabs %}

### Directions

{% tabs %}
{% tab title="Up" %}
![](/files/-Lote8cM9BtTIpz7YZ9G)

```markup
<div class="btn-group dropup">

    <!-- Dropdown Button -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropup button
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Down" %}
![](/files/-LoteBDwRaGk4xS8u6P0)

```markup
<div class="btn-group dropdown">

    <!-- Dropdown Button -->
    <button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
        Offset
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
    <!-- /dropdown menu -->
    
</div>
```

{% endtab %}

{% tab title="Right" %}
![](/files/-LoteDd9PWJyvJpxVoNh)

```markup
<div class="btn-group dropright">

    <!-- Dropdown Button -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropup button
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}

{% tab title="Left" %}
![](/files/-LoteFHuH8_rKQat-4gS)

```markup
<div class="btn-group dropleft">

    <!-- Dropdown Button -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropleft button
    </button>
    <!-- /dropdown button -->

    <!-- Dropdown Menu -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
    <!-- /dropdown menu -->

</div>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift.g-axon.work/components/dropdowns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
