@frankhoodbs/dropdown-cmp NPM

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.

Version License

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