## Feature Examples ### Structure - description: This component consists of a list of options inside a popover that is called out via a `trigger` element. The `trigger` can be any interactive WSR component. Usually it’s `TextButton.` - example: ```jsx ``` ### Trigger action - description: Call out a popover on click or hover interactions. - example: ```jsx ``` ### Placement - description: Control the dropdown layout location around a trigger with the `placement` prop. It accepts all \ placement options. Move it farther from the trigger on X and Y axis with the `moveBy` prop. - example: ```jsx ``` ### Dimensions - description: Control dropdown layout dimensions with:
- `maxHeight` - limit the height for longer list of options.
- `minWidth` - control minimum width when the trigger element is narrow.
- `maxWidth` - limit the width when the list contains long titles.
- `dynamicWidth` - match the dropdown width to the trigger element width.
- example: ```jsx ``` ### Arrow - description: Control the popover arrow visibility with the `showArrow` prop. It’s not displayed by default. - example: ```jsx ``` ### List item builders - description: Build custom dropdown layouts with:
- `listItemSectionBuilder` - use this element to group items into sections by type. See ListItemSection for more details.
- `listItemActionBuilder` - use this element to add text button for related list actions, e.g. "Manage categories". See ListItemAction for more details.
- `listItemSelectBuilder` - use this element to build custom list designs. See ListItemSelect for more details.
- example: ```jsx ``` ### Focus on option - description: Control a focused element inside of dropdown with:
- `focusOnOption` - control which option is highlighted when nothing is selected yet.
- `focusOnSelectedOption` - scrolls list to display selected option when dropdown is opened.
- example: ```jsx ``` ### Animate - description: Create smooth transitions by adding enter and exit animations to the popover with the `animate` prop. - example: ```jsx ``` ## Common Use Case Examples ### Content filters - description: Use DropdownBase to build custom filters for page or card content. - example: ```jsx ``` ### Assign task or item - description: Use DropdownBase to call out popovers for the user to assign a person. Once selected, replace the trigger button with a tag representing the user. - example: ```jsx ```