# Dropdown
Display contextual menus from buttons and links in any Bootstrap direction.
```twig
Dropdown buttonActionAnother actionSomething else here
```
## Installation
```shell
php bin/console ux:install dropdown --kit bootstrap
```
## Usage
```twig
ActionsEditDuplicateArchive
```
## 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.
```twig
{% for color in ['primary', 'secondary', 'success', 'info', 'warning', 'danger'] %}
{{ color|title }}ActionAnother actionSomething else here
{% endfor %}
Dropdown linkActionAnother action
```
### Split button
Separate the primary action from the menu toggle.
```twig
{% for color in ['primary', 'secondary', 'success', 'info', 'warning', 'danger'] %}
ActionAnother actionSeparated link
{% endfor %}
```
### Sizing
Create large and small regular or split dropdown buttons.
```twig
Large buttonActionActionSmall buttonActionAction
```
### Dark dropdowns
Render a dark menu with a visible active item.
```twig
Dropdown buttonActionAnother actionSomething else hereSeparated link
```
### Directions
Open menus from the center, above, or from either side.
```twig
```
### Active and disabled items
Communicate the current item and unavailable choices.
```twig
Regular linkActive linkDisabled link
```
### Menu alignment
Align a menu against the end of its toggle.
```twig
Right-aligned menuActionAnother actionSomething else here
```
### Responsive alignment
Change menu alignment at Bootstrap breakpoints.
```twig
Left-aligned but right-aligned when large screenActionRight-aligned but left-aligned when large screenAction
```
### Alignment options
Combine responsive alignment with dropdowns that open in different directions.
```twig
DropdownMenu itemMenu itemDropendRight-aligned, left-aligned when largeDropstartLeft-aligned, right-aligned when largeDropupRight-aligned menu
```
### Headers, dividers, and text
Structure longer menus with headings, separators, and explanatory copy.
```twig
Dropdown headerActionAnother actionSome example text that's free-flowing within the dropdown menu.Separated link
```
### Forms
Display a static form or open one from a dropdown toggle.
```twig
Dropdown form
```
### Dropdown options
Configure Popper's offset and reference element with Bootstrap data attributes.
```twig
OffsetActionAction
```
### Auto close behavior
Choose which inside or outside interactions dismiss the menu.
```twig