# syn-dropdown

## Summary

Dropdowns expose additional content that "drops down" in a panel.

## Documentation

- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs)
- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41203-538934)
- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=11573-375949)

## Class Information

- **Tag Name:** `syn-dropdown`
- **Import Example:** `import SynDropdown from '@synergy-design-system/components/components/dropdown/dropdown.js';`

## Usage Information

- **Status:** stable
- **Since:** 1.12.0

## Available Slots

- `(default)`: The dropdown's main content.
- `trigger`: The dropdown's trigger, usually a `<syn-button>` element.

## Available Properties

### containingElement

attribute: -
reflects: -
type: `HTMLElement | undefined`
default: none

The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other components that use a dropdown internally.

### disabled

attribute: `disabled`
reflects: yes
type: `boolean`
default: `false`

Disables the dropdown so the panel will not open.

### distance

attribute: `distance`
reflects: no
type: `number`
default: `0`

The distance in pixels from which to offset the panel away from its trigger.

### open

attribute: `open`
reflects: yes
type: `boolean`
default: `false`

Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.

### placement

attribute: `placement`
reflects: yes
type: `| 'top'
    | 'top-start'
    | 'top-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'right'
    | 'right-start'
    | 'right-end'
    | 'left'
    | 'left-start'
    | 'left-end'`
default: `'bottom-start'`

The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.

### skidding

attribute: `skidding`
reflects: no
type: `number`
default: `0`

The distance in pixels from which to offset the panel along its trigger.

### stayOpenOnSelect

attribute: `stay-open-on-select`
reflects: yes
type: `boolean`
default: `false`

By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions.

### sync

attribute: `sync`
reflects: yes
type: `'width' | 'height' | 'both' | undefined`
default: `undefined`

Syncs the popup width or height to that of the trigger element.

## Available Methods

### hide()

parameters: -
returns: `void`

Hides the dropdown panel

### reposition()

parameters: -
returns: `void`

Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
is activated.

### show()

parameters: -
returns: `void`

Shows the dropdown panel.

## Available CSS Parts

- `base`: The component's base wrapper, an `<syn-popup>` element.
- `base__popup`: The popup's exported `popup` part. Use this to target the tooltip's popup container.
- `panel`: The panel that gets shown when the dropdown is open.
- `trigger`: The container that wraps the trigger.

## Available Events

### syn-after-hide

type: `SynAfterHideEvent`

Emitted after the dropdown closes and all animations are complete.

### syn-after-show

type: `SynAfterShowEvent`

Emitted after the dropdown opens and all animations are complete.

### syn-hide

type: `SynHideEvent`

Emitted when the dropdown closes.

### syn-show

type: `SynShowEvent`

Emitted when the dropdown opens.

## Dependencies

- `syn-popup`
