@frankhoodbs/dropdown-cmp

Dropdown Component

A flexible and accessible dropdown component tailored for Vue 3. This dropdown is designed for both visual appeal and usability, adhering to ARIA guidelines. The component is extensible, allowing for easy integration and customization of its design to match your project.

Props

Prop Name	Default Value	Description
data-options	-	An array of link items for the dropdown menu
data-id-prefix	-	required Prefix for all the id attributes
data-disabled	false	Boolean indicating if the dropdown is disabled
data-placement	'bottom-start'	Initial placement for the floating menu
data-fallback-placements	-	Array of alternative placements for the floating menu in case the desired placement is not possible
data-offset	0	Offset (in pixels) between the button and the floating menu

Slots

Slot Name	Description	Context Props
button	Slot for custom content of the dropdown button	expanded: Boolean indicating if the dropdown menu is expanded
link	Slot for custom content of each dropdown menu item	option: The current option object from options prop index: The current index of the option in the options array attr: Object with predefined attributes for the menu item

CSS Custom Properties

Custom Property	Default Value	Description
--dropdown-button-background	transparent	Background color of the dropdown button.
--dropdown-button-color	black	Text color of the dropdown button.
--dropdown-button-border-width	0px	Width of the dropdown button border.
--dropdown-button-border-color	transparent	Color of the dropdown button border.
--dropdown-button-border-radius	0px	Border radius of the dropdown button.
--dropdown-disabled-opacity	0.5	Opacity for the disabled state of the dropdown button.
--dropdown-menu-width	100%	Width of the dropdown menu.
--dropdown-menu-min-width	0	Minimum width of the dropdown menu.
--dropdown-menu-max-width	none	Maximum width of the dropdown menu.
--dropdown-menu-background	white	Background color of the dropdown menu.
--dropdown-menu-color	black	Text color of the dropdown menu.
--dropdown-menu-border-width	1px	Width of the dropdown menu border.
--dropdown-menu-border-color	black	Color of the dropdown menu border.
--dropdown-menu-border-radius	4px	Border radius of the dropdown menu.
--dropdown-menu-max-height	200px	Maximum height of the dropdown menu.
--dropdown-option-active-background	grey	Background color for active/hovered dropdown option.
--dropdown-option-color-outline	red	Outline color for the active dropdown option.
--dropdown-option-size-outline	3px	Width of the outline for the active dropdown option.
--dropdown-option-size-outline-offset	1px	Offset of the outline for the active dropdown option.
--dropdown-transition-duration	0.3s	Transition duration for dropdown animations.
--dropdown-transition-timing-function	ease-in-out	Transition timing function for dropdown animations.