Dropdown
Dropdowns are menus that display over other content. They are usually opened by clicking a button, and the dropdown menu will appear under the button.
We provide the following web components:
The dropdown component has no opinions about the actual menu, but a fun-dropdown-menu is recommended.
Note that the open property is one-way. Developers will need to listen to the
funDismiss event and set open to false themselves. The funDismiss event is emitted when:
- user clicks outside the dropdown
- user presses the ‘escape’ key
If your popover will contain other floating content such as dropdowns or tooltips you should add class relative to your body content,
so that positioning works properly in Firefox and safari.
Examples
Specifications
Properties
| Property | Attribute | Required | Description |
|---|---|---|---|
| align | align | Which edge of the trigger element to align the dropdown content to. | |
| backdrop | backdrop | Use a backdrop to capture clicks outside the popover rather than capturing clicks in the document. | |
| debug | debug | Set to true for extra console debug logging. | |
| offsetY | offset-y | Add vertical spacing between the dropdown and the trigger element. | |
| open | open | true | Is the dropdown open. |
| positionStrategy | position-strategy | Use to override the positioning strategy, which can be helpful in some conditions. |
Events
| Name | Description |
|---|---|
| funDismiss | Occurs when the popover is dismissed. |
Slots
| Name | Description |
|---|---|
| content | The element to show when the dropdown is open. |
| trigger | The element the trigger should be positioned under. Usually clicking this element should open the dropdown. |
