Dropdown

Basic

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" %}Dropdown button{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
                {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
                {% component "DropdownItem" href="#" %}Something else here{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Primary

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="primary" %}Primary{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Success

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="success" %}Success{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Danger

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="danger" %}Danger{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Warning

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="warning" %}Warning{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Info

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="info" %}Info{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Light

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="light" %}Light{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Variant Dark

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="dark" %}Dark{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Size Large

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" size="lg" %}Large button{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Size Small

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" size="sm" %}Small button{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Dropup

{% component "Dropdown" direction="up" %}
              {% component "DropdownToggle" variant="secondary" %}Dropup{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Dropend

{% component "Dropdown" direction="end" %}
              {% component "DropdownToggle" variant="secondary" %}Dropend{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Dropstart

{% component "Dropdown" direction="start" %}
              {% component "DropdownToggle" variant="secondary" %}Dropstart{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Centered

{% component "Dropdown" centered=True %}
              {% component "DropdownToggle" variant="secondary" %}Centered dropdown{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Centered Dropup

{% component "Dropdown" direction="up" centered=True %}
              {% component "DropdownToggle" variant="secondary" %}Centered dropup{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" %}Right-aligned menu{% endcomponent %}
              {% component "DropdownMenu" align="end" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" %}Left-aligned, lg-right{% endcomponent %}
              {% component "DropdownMenu" align_lg="end" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" %}Right-aligned, lg-left{% endcomponent %}
              {% component "DropdownMenu" align="end" align_lg="start" %}
                {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Auto Close True

{% component "Dropdown" auto_close="true" %}
              {% component "DropdownToggle" variant="secondary" %}Default dropdown{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Menu item{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Auto Close False

{% component "Dropdown" auto_close="false" %}
              {% component "DropdownToggle" variant="secondary" %}Manual close{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Menu item{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Auto Close Inside

{% component "Dropdown" auto_close="inside" %}
              {% component "DropdownToggle" variant="secondary" %}Clickable inside{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Menu item{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Auto Close Outside

{% component "Dropdown" auto_close="outside" %}
              {% component "DropdownToggle" variant="secondary" %}Clickable outside{% endcomponent %}
              {% component "DropdownMenu" %}
                {% component "DropdownItem" href="#" %}Menu item{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Dark Dropdown

{% component "Dropdown" %}
              {% component "DropdownToggle" variant="secondary" %}Dropdown button{% endcomponent %}
              {% component "DropdownMenu" dark=True %}
                {% component "DropdownItem" href="#" active=True %}Action{% endcomponent %}
                {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
                {% component "DropdownItem" href="#" %}Something else here{% endcomponent %}
                {% component "DropdownDivider" / %}
                {% component "DropdownItem" href="#" %}Separated link{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

With Divider

{% component "DropdownMenu" %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Something else here{% endcomponent %}
              {% component "DropdownDivider" / %}
              {% component "DropdownItem" href="#" %}Separated link{% endcomponent %}
            {% endcomponent %}

Preview:

With Header

{% component "DropdownMenu" %}
              {% component "DropdownHeader" %}Dropdown header{% endcomponent %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

With Text

{% component "DropdownMenu" %}
              {% component "DropdownItemText" %}Dropdown item text{% endcomponent %}
              {% component "DropdownItem" href="#" %}Action{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another action{% endcomponent %}
            {% endcomponent %}

Preview:

Active Item

{% component "DropdownMenu" %}
              {% component "DropdownItem" href="#" %}Regular link{% endcomponent %}
              {% component "DropdownItem" href="#" active=True %}Active link{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another link{% endcomponent %}
            {% endcomponent %}

Preview:

Disabled Item

{% component "DropdownMenu" %}
              {% component "DropdownItem" href="#" %}Regular link{% endcomponent %}
              {% component "DropdownItem" href="#" disabled=True %}Disabled link{% endcomponent %}
              {% component "DropdownItem" href="#" %}Another link{% endcomponent %}
            {% endcomponent %}

Preview:

Button Items

{% component "DropdownMenu" %}
              {% component "DropdownItem" as_="button" %}Action{% endcomponent %}
              {% component "DropdownItem" as_="button" %}Another action{% endcomponent %}
              {% component "DropdownItem" as_="button" %}Something else here{% endcomponent %}
            {% endcomponent %}

Preview: