The component consists of the following elements:

• trigger: shows the component label or content and will render to reflect state of the component (e.g. focus, hover, disabled).
• bib: the expandable content area that is shown/hidden when the trigger is activated.
• chevron: an optional icon indicating the expanded/collapsed state of the dropdown. Visible when the chevron attribute is set.
• help text: descriptive text rendered below the trigger intended to help clarify the intended use of the component instance.

The trigger is a focusable element and will visually respond to common UI states - Hover (:hover), Focus (:focus / :focus-visible), Disabled (:disabled). The component does not have a visual response to the Active (:active) state.

The bib is positioned relative to the trigger and may be configured to appear above or below. At smaller viewports the bib can switch to fullscreen mode based on the fullscreenBreakpoint setting.

Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers.

The auro-dropdown component supports the shape, size and layout feature set. The component defaults to the layout="classic", shape="classic" and size="lg".

The classic layout is default for auro-dropdown. No customization is needed to achieve this look.

<auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
  <div style="padding: var(--ds-size-150);">
    Lorem ipsum solar
    <br />
    <auro-button id="classicButton">
      Dismiss Dropdown
    </auro-button>
  </div>
  <span slot="helpText">
    Help text
  </span>
  <div slot="trigger">
    Trigger
  </div>
</auro-dropdown>

The emphasized layout is only supported on dark backgrounds.

The emphasized layout supports the following shapes:

• pill
• pill-left
• pill-right

The emphasized layout supports the following sizes:

• xl

<auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
  Lorem ipsum solar
  <div slot="trigger">
    Trigger
  </div>
  <span slot="helpText">
    Help text - Lorem ipsum solar lorem ipsum solar
  </span>
</auro-dropdown>
<auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
  Lorem ipsum solar
  <div slot="trigger">
    Trigger
  </div>
  <span slot="helpText">
    Help text - Lorem ipsum solar lorem ipsum solar
  </span>
</auro-dropdown>
<auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
  Lorem ipsum solar
  <div slot="trigger">
    Trigger
  </div>
  <span slot="helpText">
    Help text - Lorem ipsum solar lorem ipsum solar
  </span>
</auro-dropdown>

The snowflake layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.

The snowflake layout is only expected to be used on dark backgrounds, in conjunction with appearance="inverse".

<auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
  Lorem ipsum solar
  <div slot="trigger">
    Trigger
  </div>
  <span slot="helpText">
    Help text - Lorem ipsum solar lorem ipsum solar
  </span>
</auro-dropdown>