# Dropdown
The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
## Dropdown use cases
The `auro-dropdown` element should be used in situations where users may:
* interact with an element to get clarification on content offering
* provide definition to iconic imagery
* when interactive help is required
## Accessibility support
To meet our accessibility requirement, all uses of `auro-dropdown` should have a valid label. See the following options.
1. Use the `label` content slot
1. Use `aria-label` to insert label content that will only be read by screen readers
1. Use `aria-labeledby` to append a description from another element on the page
Not including one of the above options will result in your UI being non-compliant with Alaska's accessibility policies.
## Common use with auro-label
This first common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-label` attribute is used to define a string value that labels an interactive element.
Lorem ipsum solar
Help text
Trigger
See code
```html
Lorem ipsum solar
Help text
Trigger
```
## Common use with aria-labelledby
This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-labelledby` attribute to identify the element that labels the element it is applied to.
The element is labelled by content external to the element.
Lorem ipsum solar
Help text
Trigger
See code
```html
The element is labelled by content external to the element.
Lorem ipsum solar
Help text
Trigger
```
## Common use using the label content slot
This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `slot` content container to define a string value that labels the interactive element.
Lorem ipsum solar
Help text
Element label (default text will be read by screen reader)
Trigger
See code
```html
Lorem ipsum solar
Help text
Element label (default text will be read by screen reader)
Trigger
```
## Common use with popover content wider than the trigger
This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the trigger is full width of the containing element and the popover content is set to a width wider than the trigger.
This is special content.
Help text
Trigger
See code
```html
This is special content.
Help text
Trigger
```
## Common use with popover width matching the trigger
This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally `matchWidth` attribute is used to make the popover match the width of the trigger.
Lorem ipsum solar
Help text
Trigger
See code
```html
Lorem ipsum solar
Help text
Trigger
```
## Supported standard and accessible interactions
The dropdown can be opened with the following actions:
1. Clicking/tapping on the trigger.
1. Tabbing to the trigger and using the `enter` or `spacebar` keys.
1. Programmatically via another control in the UI calling the `show()` method (see api).
The dropdown can be closed with the following actions:
1. Clicking anywhere in the view outside of the dropdown.
1. Clicking on the trigger when the `toggle` attribute is used.
1. Using the `esc` key.
1. Programmatically via another control in the UI calling the `hide()` method (see api).
## Recommended Use and Version Control
There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-dropdown` custom element is defined automatically.
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroDropdown.register(name)` method and pass in a unique name.
```js
import { AuroDropdown } from './src/auro-dropdown.js';
AuroDropdown.register('custom-dropdown');
```
This will create a new custom element that you can use in your HTML that will function identically to the `` element.