@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-menu-items	-	required An array of items for the dropdown menu
data-id	-	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
menuitem	Slot for custom content of each dropdown menuitem	option: The current option object from data-menu-items prop index: The current index of the option in the data-menu-items array attr: Object with predefined attributes for the menuitem

CSS Custom Properties

Custom Property	Default Value	Description
--dropdown-width	100%	Width of the dropdown wrapper.
--dropdown-button-position		Background color of the dropdown button.
--dropdown-button-width		Width of the dropdown button.
--dropdown-button-padding		Padding of the dropdown button.
--dropdown-button-bg-color		Background color of the dropdown button.
--dropdown-button-color		Text color of the dropdown button.
--dropdown-button-border-width		Width of the dropdown button border.
--dropdown-button-border-style		Style of the dropdown button border.
--dropdown-button-border-color		Color of the dropdown button border.
--dropdown-button-border-radius		Border radius of the dropdown button.
--dropdown-button-box-shadow		Box shadow of the dropdown button.
--dropdown-button-opacity		Opacity of the dropdown button.
--dropdown-button-z-index		Z-index of the dropdown button.
--dropdown-button-expanded-bg-color		Background color for the expanded state of the dropdown button.
--dropdown-button-expanded-color		Text color for the expanded state of the dropdown button.
--dropdown-button-expanded-border-width		Width for the expanded state of the dropdown button border.
--dropdown-button-expanded-border-style		Style for the expanded state of the dropdown button border.
--dropdown-button-expanded-border-color		Color for the expanded state of the dropdown button border.
--dropdown-button-expanded-box-shadow		Box shadow for the expanded state of the dropdown button.
--dropdown-button-expanded-outline		Outline for the expanded state of the dropdown button.
--dropdown-button-expanded-outline-offset		Outline offset for the expanded state of the dropdown button.
--dropdown-button-disabled-bg-color		Background color for the disabled state of the dropdown button.
--dropdown-button-disabled-color		Text color for the disabled state of the dropdown button.
--dropdown-button-disabled-border-width		Width for the disabled state of the dropdown button border.
--dropdown-button-disabled-border-style		Style for the disabled state of the dropdown button border.
--dropdown-button-disabled-border-color		Color for the disabled state of the dropdown button border.
--dropdown-button-disabled-box-shadow		Box shadow for the disabled state of the dropdown button.
--dropdown-button-disabled-opacity	0.333	Opacity for the disabled state of the dropdown button.
--dropdown-button-disabled-cursor	not-allowed	Cursor for the disabled state of the dropdown button.
--dropdown-button-hover-bg-color		Background color for the hover state of the dropdown button.
--dropdown-button-hover-color		Text color for the hover state of the dropdown button.
--dropdown-button-hover-border-width		Width for the hover state of the dropdown button border.
--dropdown-button-hover-border-style		Style for the hover state of the dropdown button border.
--dropdown-button-hover-border-color		Color for the hover state of the dropdown button border.
--dropdown-button-hover-box-shadow		Box shadow for the hover state of the dropdown button.
--dropdown-button-hover-opacity		Opacity for the hover state of the dropdown button.
--dropdown-menu-width	100%	Width of the dropdown menu.
--dropdown-menu-max-width		Maximum width of the dropdown menu.
--dropdown-menu-min-width		Minimum width of the dropdown menu.
--dropdown-menu-max-height		Maximum height of the dropdown menu.
--dropdown-menu-padding		Padding of the dropdown menu.
--dropdown-menu-bg-color	white	Background color of the dropdown menu.
--dropdown-menu-color		Text color of the dropdown menu.
--dropdown-menu-border-width	1px	Width of the dropdown menu border.
--dropdown-menu-border-style	solid	Style of the dropdown menu border.
--dropdown-menu-border-color		Color of the dropdown menu border.
--dropdown-menu-border-radius	0.25rem	Border radius of the dropdown menu.
--dropdown-menu-box-shadow		Box shadow of the dropdown menu.
--dropdown-menu-z-index	1	Z-index of the dropdown menu.
--dropdown-menuitem-display	block	Display of the dropdown menuitems.
--dropdown-menuitem-width	100%	Width of the dropdown menuitems.
--dropdown-menuitem-padding		Padding of the dropdown menuitems.
--dropdown-menuitem-bg-color		Background color of the dropdown menuitems.
--dropdown-menuitem-color		Text color of the dropdown menuitems.
--dropdown-menuitem-text-decoration		Text decoration of the dropdown menuitems.
--dropdown-menuitem-text-underline-offset		Text underline offset of the dropdown menuitems.
--dropdown-menuitem-hover-bg-color		Background color for the hover state of the dropdown menuitems.
--dropdown-menuitem-hover-color		Text color for the hover state of the dropdown menuitems.
--dropdown-menuitem-hover-text-decoration		Text decoration for the hover state of the dropdown menuitems.
--dropdown-menuitem-focus-bg-color		Background color for the focus state of the dropdown menuitems.
--dropdown-menuitem-focus-color		Text color for the focus state of the dropdown menuitems.
--dropdown-menuitem-focus-text-decoration		Text decoration for the focus state of the dropdown menuitems.
--dropdown-menuitem-focus-visible-outline		Outline for the focused dropdown menuitems.
--dropdown-menuitem-focus-visible-outline-offset		Outline offset for the focused dropdown menuitems.
--dropdown-transition-duration	0.3s	Transition duration for dropdown animations.
--dropdown-transition-timing-function	ease-in-out	Transition timing function for dropdown animations.
--dropdown-translate-y	-0.5rem	Translate-y for dropdown animations.