Description

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.

User Stories

Text Trigger

Lorem ipsum solar

Trigger

See code

<auro-dropdown aria-label="custom label">
  Lorem ipsum solar
  <div slot="trigger">
    Trigger
  </div>
</auro-dropdown>

Icon Trigger

Lorem ipsum solar

See code

<auro-dropdown aria-label="custom label">
  Lorem ipsum solar
  <div slot="trigger">
    <auro-icon
      category="interface"
      name="arrow-down"></auro-icon>
  </div>
</auro-dropdown>

Button Trigger

Lorem ipsum solar

Dropdown

See code

<auro-dropdown aria-label="custom label">
  Lorem ipsum solar
  <div slot="trigger">
    <auro-button slot="trigger">
      Dropdown
    </auro-button>
  </div>
</auro-dropdown>