View as Markdown

Dropdown

Display contextual menus from buttons and links in any Bootstrap direction.

100%
Loading... 
<div class="d-flex justify-content-center align-items-start align-self-stretch w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle id="demo-dropdown">Dropdown button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu labelledBy="demo-dropdown">
            <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Installation

php bin/console ux:install dropdown --kit bootstrap

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop direction &#039;down&#039;|&#039;center&#039;|&#039;up&#039;|&#039;up-center&#039;|&#039;end&#039;|&#039;start&#039; The direction in which the menu opens. #}
{# @prop grouped boolean Whether to use a button group wrapper, as required by split toggles. #}
{# @block content The dropdown toggle and menu. #}
{%- props direction = &#039;down&#039;, grouped = false -%}
{%- set classes = html_classes({
    dropdown: direction == &#039;down&#039; and not grouped,
    &#039;btn-group&#039;: grouped or direction in [&#039;up&#039;, &#039;end&#039;, &#039;start&#039;],
    &#039;dropdown-center&#039;: direction == &#039;center&#039;,
    dropup: direction == &#039;up&#039;,
    &#039;dropup-center dropup&#039;: direction == &#039;up-center&#039;,
    dropend: direction == &#039;end&#039;,
    dropstart: direction == &#039;start&#039;,
}) -%}
&lt;div {{ attributes.defaults({class: classes}) }}&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

&lt;li&gt;&lt;hr {{ attributes.defaults({class: &#039;dropdown-divider&#039;}) }}&gt;&lt;/li&gt;

{# @prop tag &#039;h1&#039;|&#039;h2&#039;|&#039;h3&#039;|&#039;h4&#039;|&#039;h5&#039;|&#039;h6&#039; The heading element to render. #}
{# @block content The dropdown section heading. #}
{%- props tag = &#039;h6&#039; -%}
{%- set final_tag = tag in [&#039;h1&#039;, &#039;h2&#039;, &#039;h3&#039;, &#039;h4&#039;, &#039;h5&#039;, &#039;h6&#039;] ? tag : &#039;h6&#039; -%}
&lt;li&gt;&lt;{{ final_tag }} {{ attributes.defaults({class: &#039;dropdown-header&#039;}) }}&gt;{%- block content %}{% endblock -%}&lt;/{{ final_tag }}&gt;&lt;/li&gt;

{# @prop tag &#039;a&#039;|&#039;button&#039; The interactive element to render. #}
{# @prop href string The destination used by link items. #}
{# @prop active boolean Whether the item represents the current selection. #}
{# @prop disabled boolean Whether the item is unavailable. #}
{# @block content The dropdown item label. #}
{%- props tag = &#039;a&#039;, href = &#039;#&#039;, active = false, disabled = false -%}
{%- set final_tag = tag == &#039;button&#039; ? &#039;button&#039; : &#039;a&#039; -%}
{%- set default_attrs = {
    class: html_classes({&#039;dropdown-item&#039;: true, active: active, disabled: disabled}),
} -%}
{%- if final_tag == &#039;button&#039; -%}
    {%- set default_attrs = default_attrs|merge({type: &#039;button&#039;, disabled: disabled}) -%}
{%- else -%}
    {%- if disabled -%}
        {%- set default_attrs = default_attrs|merge({&#039;aria-disabled&#039;: &#039;true&#039;, tabindex: &#039;-1&#039;}) -%}
    {%- else -%}
        {%- set default_attrs = default_attrs|merge({href: href}) -%}
    {%- endif -%}
    {%- if active -%}
        {%- set default_attrs = default_attrs|merge({&#039;aria-current&#039;: &#039;true&#039;}) -%}
    {%- endif -%}
{%- endif -%}
&lt;li&gt;&lt;{{ final_tag }} {{ attributes.defaults(default_attrs) }}&gt;{%- block content %}{% endblock -%}&lt;/{{ final_tag }}&gt;&lt;/li&gt;

{# @prop tag &#039;ul&#039;|&#039;div&#039;|&#039;form&#039; The menu container element to render. #}
{# @prop dark boolean Whether to use Bootstrap&#039;s dark menu variant. #}
{# @prop align string|array&lt;string&gt;|null One or more Bootstrap alignment suffixes, such as `end` or `lg-end`. #}
{# @prop labelledBy string|null The identifier of the toggle that labels the menu. #}
{# @block content The dropdown menu items and custom content. #}
{%- props tag = &#039;ul&#039;, dark = false, align = null, labelledBy = null -%}
{%- set final_tag = tag in [&#039;ul&#039;, &#039;div&#039;, &#039;form&#039;] ? tag : &#039;ul&#039; -%}
{%- set menu_classes = html_classes({
    &#039;dropdown-menu&#039;: true,
    &#039;dropdown-menu-dark&#039;: dark,
}) -%}
{%- if align is iterable -%}
    {%- for alignment in align -%}
        {%- set menu_classes = menu_classes ~ &#039; dropdown-menu-&#039; ~ alignment -%}
    {%- endfor -%}
{%- elseif align is not null -%}
    {%- set menu_classes = menu_classes ~ &#039; dropdown-menu-&#039; ~ align -%}
{%- endif -%}
{%- set default_attrs = {class: menu_classes} -%}
{%- if labelledBy is not null -%}
    {%- set default_attrs = default_attrs|merge({&#039;aria-labelledby&#039;: labelledBy}) -%}
{%- endif -%}
&lt;{{ final_tag }} {{ attributes.defaults(default_attrs) }}&gt;
    {%- block content %}{% endblock -%}
&lt;/{{ final_tag }}&gt;

{# @block content The non-interactive dropdown text. #}
&lt;li&gt;&lt;span {{ attributes.defaults({class: &#039;dropdown-item-text&#039;}) }}&gt;{%- block content %}{% endblock -%}&lt;/span&gt;&lt;/li&gt;

{# @prop tag &#039;button&#039;|&#039;a&#039; The interactive element to render. #}
{# @prop color &#039;primary&#039;|&#039;secondary&#039;|&#039;success&#039;|&#039;danger&#039;|&#039;warning&#039;|&#039;info&#039;|&#039;light&#039;|&#039;dark&#039; The Bootstrap contextual color. #}
{# @prop outline boolean Whether to render the outline variant. #}
{# @prop size &#039;sm&#039;|&#039;lg&#039;|null The optional button size. #}
{# @prop split boolean Whether to render only the split-menu caret. #}
{# @prop disabled boolean Whether the toggle is disabled. #}
{# @block content The visible toggle label. #}
{%- props
    tag = &#039;button&#039;,
    color = &#039;secondary&#039;,
    outline = false,
    size = null,
    split = false,
    disabled = false
-%}
{%- set final_tag = tag == &#039;a&#039; ? &#039;a&#039; : &#039;button&#039; -%}
{%- set classes = html_classes({
    btn: true,
    (&#039;btn-&#039; ~ (outline ? &#039;outline-&#039; : &#039;&#039;) ~ color): true,
    (&#039;btn-&#039; ~ size): size in [&#039;sm&#039;, &#039;lg&#039;],
    &#039;dropdown-toggle&#039;: true,
    &#039;dropdown-toggle-split&#039;: split,
}) -%}
{%- set default_attrs = {
    class: classes,
    &#039;data-bs-toggle&#039;: &#039;dropdown&#039;,
    &#039;aria-expanded&#039;: &#039;false&#039;,
} -%}
{%- if final_tag == &#039;button&#039; -%}
    {%- set default_attrs = default_attrs|merge({type: &#039;button&#039;, disabled: disabled}) -%}
{%- else -%}
    {%- set default_attrs = default_attrs|merge({role: &#039;button&#039;}) -%}
    {%- if disabled -%}
        {%- set default_attrs = default_attrs|merge({&#039;aria-disabled&#039;: &#039;true&#039;, tabindex: &#039;-1&#039;}) -%}
    {%- else -%}
        {%- set default_attrs = default_attrs|merge({href: &#039;#&#039;}) -%}
    {%- endif -%}
{%- endif -%}
&lt;{{ final_tag }} {{ attributes.defaults(default_attrs) }}&gt;
    {%- if split %}&lt;span class=&quot;visually-hidden&quot;&gt;Toggle Dropdown&lt;/span&gt;{% else %}{%- block content %}{% endblock -%}{% endif -%}
&lt;/{{ final_tag }}&gt;

Usage

<twig:Dropdown>
    <twig:Dropdown:Toggle id="actions-dropdown">Actions</twig:Dropdown:Toggle>
    <twig:Dropdown:Menu labelledBy="actions-dropdown">
        <twig:Dropdown:Item href="/edit">Edit</twig:Dropdown:Item>
        <twig:Dropdown:Item href="/duplicate">Duplicate</twig:Dropdown:Item>
        <twig:Dropdown:Divider />
        <twig:Dropdown:Item href="/archive">Archive</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
</twig:Dropdown>

Accessibility

Bootstrap dropdowns are generic popovers, so the component does not add ARIA menu roles automatically. Add role="menu", role="menuitem", and the matching keyboard behavior only when the dropdown implements the complete ARIA menu pattern.

Use a button for actions and reserve link toggles and items for navigation. Give a toggle an id and pass it to the menu's labelledBy prop when an explicit accessible relationship is useful. Disabled links receive aria-disabled="true" and are removed from sequential keyboard navigation, but application code must still prevent any custom activation behavior.

Examples

Single button

Use buttons or links with Bootstrap's contextual colors.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-2 w-100">
    {% for color in ['primary', 'secondary', 'success', 'info', 'warning', 'danger'] %}
        <twig:Dropdown>
            <twig:Dropdown:Toggle color="{{ color }}">{{ color|title }}</twig:Dropdown:Toggle>
            <twig:Dropdown:Menu>
                <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
            </twig:Dropdown:Menu>
        </twig:Dropdown>
    {% endfor %}
    <twig:Dropdown>
        <twig:Dropdown:Toggle tag="a" color="primary">Dropdown link</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu>
            <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Split button

Separate the primary action from the menu toggle.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-2 w-100">
    {% for color in ['primary', 'secondary', 'success', 'info', 'warning', 'danger'] %}
        <twig:Dropdown grouped>
            <button type="button" class="btn btn-{{ color }}">{{ color|title }}</button>
            <twig:Dropdown:Toggle color="{{ color }}" split />
            <twig:Dropdown:Menu>
                <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
                <twig:Dropdown:Divider />
                <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
            </twig:Dropdown:Menu>
        </twig:Dropdown>
    {% endfor %}
</div>

Sizing

Create large and small regular or split dropdown buttons.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3 w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle color="secondary" size="lg">Large button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown grouped>
        <button class="btn btn-light btn-lg" type="button">Large split button</button>
        <twig:Dropdown:Toggle color="light" size="lg" split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown>
        <twig:Dropdown:Toggle color="secondary" size="sm">Small button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown grouped>
        <button class="btn btn-light btn-sm" type="button">Small split button</button>
        <twig:Dropdown:Toggle color="light" size="sm" split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Dark dropdowns

Render a dark menu with a visible active item.

100%
Loading... 
<div class="d-flex justify-content-center align-items-start align-self-stretch w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle id="dark-dropdown" color="secondary">Dropdown button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu dark labelledBy="dark-dropdown">
            <twig:Dropdown:Item href="#" active>Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
            <twig:Dropdown:Divider />
            <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Directions

Open menus from the center, above, or from either side.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3 w-100">
    <twig:Dropdown direction="center">
        <twig:Dropdown:Toggle>Centered dropdown</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up">
        <twig:Dropdown:Toggle>Dropup</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up" grouped>
        <button type="button" class="btn btn-secondary">Split dropup</button>
        <twig:Dropdown:Toggle split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up-center">
        <twig:Dropdown:Toggle>Centered dropup</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="end">
        <twig:Dropdown:Toggle>Dropend</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="end" grouped>
        <button type="button" class="btn btn-secondary">Split dropend</button>
        <twig:Dropdown:Toggle split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="start">
        <twig:Dropdown:Toggle>Dropstart</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="start" grouped>
        <twig:Dropdown:Toggle split />
        <button type="button" class="btn btn-secondary">Split dropstart</button>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Menu items

Use links, buttons, or non-interactive text as menu content.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-4 w-100">
    <twig:Dropdown:Menu class="d-block position-static">
        <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
        <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
        <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
    <twig:Dropdown:Menu class="d-block position-static">
        <twig:Dropdown:Item tag="button">Action</twig:Dropdown:Item>
        <twig:Dropdown:Item tag="button">Another action</twig:Dropdown:Item>
        <twig:Dropdown:Item tag="button">Something else here</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
    <twig:Dropdown:Menu class="d-block position-static">
        <twig:Dropdown:Text>Dropdown item text</twig:Dropdown:Text>
        <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
</div>

Active and disabled items

Communicate the current item and unavailable choices.

100%
Loading... 
<twig:Dropdown:Menu class="d-block position-static">
    <twig:Dropdown:Item href="#">Regular link</twig:Dropdown:Item>
    <twig:Dropdown:Item href="#" active>Active link</twig:Dropdown:Item>
    <twig:Dropdown:Item href="#" disabled>Disabled link</twig:Dropdown:Item>
</twig:Dropdown:Menu>

Menu alignment

Align a menu against the end of its toggle.

100%
Loading... 
<div class="d-flex justify-content-center align-items-start align-self-stretch w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle id="aligned-dropdown">Right-aligned menu</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="end" labelledBy="aligned-dropdown">
            <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Responsive alignment

Change menu alignment at Bootstrap breakpoints.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-3 w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle data-bs-display="static">Left-aligned but right-aligned when large screen</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="lg-end"><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown>
        <twig:Dropdown:Toggle data-bs-display="static">Right-aligned but left-aligned when large screen</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu :align="['end', 'lg-start']"><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Alignment options

Combine responsive alignment with dropdowns that open in different directions.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3 w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle>Dropdown</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu>
            <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="end">
        <twig:Dropdown:Toggle>Dropend</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu :align="['end', 'lg-start']">
            <twig:Dropdown:Item href="#">Right-aligned, left-aligned when large</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="start">
        <twig:Dropdown:Toggle>Dropstart</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="lg-end">
            <twig:Dropdown:Item href="#">Left-aligned, right-aligned when large</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up">
        <twig:Dropdown:Toggle>Dropup</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="end"><twig:Dropdown:Item href="#">Right-aligned menu</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Headers, dividers, and text

Structure longer menus with headings, separators, and explanatory copy.

100%
Loading... 
<twig:Dropdown:Menu class="d-block position-static">
    <twig:Dropdown:Header>Dropdown header</twig:Dropdown:Header>
    <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
    <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
    <twig:Dropdown:Divider />
    <twig:Dropdown:Text>Some example text that's free-flowing within the dropdown menu.</twig:Dropdown:Text>
    <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
</twig:Dropdown:Menu>

Forms

Display a static form or open one from a dropdown toggle.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-4 w-100">
    <twig:Dropdown:Menu tag="form" class="d-block position-static p-4">
        <div class="mb-3">
            <label for="dropdown-email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="dropdown-email" placeholder="email@example.com">
        </div>
        <div class="mb-3">
            <label for="dropdown-password" class="form-label">Password</label>
            <input type="password" class="form-control" id="dropdown-password" placeholder="Password">
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="dropdown-check">
                <label class="form-check-label" for="dropdown-check">Remember me</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
    </twig:Dropdown:Menu>
    <twig:Dropdown>
        <twig:Dropdown:Toggle>Dropdown form</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu tag="form" class="p-4">
            <div class="mb-3">
                <label for="menu-email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="menu-email">
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Dropdown options

Configure Popper's offset and reference element with Bootstrap data attributes.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-3 w-100">
    <twig:Dropdown>
        <twig:Dropdown:Toggle data-bs-offset="10,20">Offset</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown grouped>
        <button type="button" class="btn btn-secondary">Reference</button>
        <twig:Dropdown:Toggle split data-bs-reference="parent" />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>

Auto close behavior

Choose which inside or outside interactions dismiss the menu.

100%
Loading... 
<div class="d-flex flex-wrap justify-content-center align-items-start gap-3 w-100">
    {% for behavior, label in {
    true: 'Default dropdown',
    inside: 'Clickable inside',
    outside: 'Clickable outside',
    false: 'Manual close',
    } %}
        <twig:Dropdown>
            <twig:Dropdown:Toggle data-bs-auto-close="{{ behavior }}">{{ label }}</twig:Dropdown:Toggle>
            <twig:Dropdown:Menu>
                <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
            </twig:Dropdown:Menu>
        </twig:Dropdown>
    {% endfor %}
</div>

API Reference

<twig:Dropdown>

Prop Type Default
direction 
 'down'|'center'|'up'|'up-center'|'end'|'start' 'down'
grouped 
 boolean false
Block Description
content The dropdown toggle and menu.

<twig:Dropdown:Header>

Prop Type Default
tag 
 'h1'|'h2'|'h3'|'h4'|'h5'|'h6' 'h6'
Block Description
content The dropdown section heading.

<twig:Dropdown:Item>

Prop Type Default
tag 
 'a'|'button' 'a'
href 
 string '#'
active 
 boolean false
disabled 
 boolean false
Block Description
content The dropdown item label.

<twig:Dropdown:Menu>

Prop Type Default
tag 
 'ul'|'div'|'form' 'ul'
dark 
 boolean false
align 
 string|array<string>|null null
labelledBy 
 string|null null
Block Description
content The dropdown menu items and custom content.

<twig:Dropdown:Text>

Block Description
content The non-interactive dropdown text.

<twig:Dropdown:Toggle>

Prop Type Default
tag 
 'button'|'a' 'button'
color 
 'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark' 'secondary'
outline 
 boolean false
size 
 'sm'|'lg'|null null
split 
 boolean false
disabled 
 boolean false
Block Description
content The visible toggle label.