# 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._ ## 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. ## 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. Using the `esc` key. 1. Programmatically via another control in the UI calling the `hide()` method (see api). ## Example(s) ### Basic

Lorem ipsum solar

Trigger

See code ```html Lorem ipsum solar

Trigger

``` ### Layouts The `auro-dropdown` element supports multiple layouts to fit different design needs. The available layouts are: `classic`, `emphasized`, and `snowflake`. Each layout offers a unique visual style while maintaining the same core functionality. **Important**: The `emphasized` and `snowflake` layouts are designed specifically for dark backgrounds and should be used with the `appearance="inverse"` attribute. #### Classic

Lorem ipsum solar

Dismiss Dropdown

Help text

Trigger

See code ```html

Lorem ipsum solar

Dismiss Dropdown

Help text

Trigger

```

Lorem ipsum solar

Dismiss Dropdown

Help text

Trigger

See code ```html

Lorem ipsum solar

Dismiss Dropdown

Help text

Trigger

``` #### Emphasized

Lorem ipsum solar

Trigger