Dropdown - Aspect UI

Docs

Components

Dropdown

Dropdown - Aspect UI

The Dropdown component displays a list of options that users can select from. It supports triggers, keyboard navigation, icons, nested items, and controlled or uncontrolled modes.

Table of Contents#

Dropdown Props
DropdownAction Props
DropdownContent Props
DropdownItem Props
DropdownList Props

Prop	Type	Default	Description
children	ReactNode	-	The content of the dropdown, usually containing DropdownAction and DropdownContent.
hover	boolean	false	Whether the dropdown opens on hover instead of click.
hoverDelay	number	0	Delay in milliseconds before opening the dropdown on hover.
closeDelay	number	100	Delay in milliseconds before closing the dropdown after hover ends.
direction	top bottom left right	'bottom'	The direction in which the dropdown content appears relative to the action button.

DropdownAction Props#

Prop	Type	Default	Description
children	ReactNode	-	The trigger element for the dropdown, such as a button or label.
className	string	''	Additional CSS classes for styling the action trigger.
icon	ReactElement	-	An optional icon to display inside the action trigger.
iconPosition	start end	'end'	Position of the icon relative to the text.
...rest	HTMLAttributes	-	Any other props are spread onto the action element.

DropdownContent Props#

Prop	Type	Default	Description
children	ReactNode	-	The content displayed inside the dropdown when open.
className	string	''	Additional CSS classes for the dropdown content wrapper.
...rest	HTMLAttributes<HTMLDivElement>	-	Any other props are spread onto the dropdown content container.

DropdownItem Props#

Prop	Type	Default	Description
children	ReactNode	-	The content inside the dropdown item, such as text or a link.
onClick	() => void	-	Callback function when the item is clicked.
className	string	''	Additional CSS classes for the dropdown item.
activeClassName	string	''	CSS class applied when the item is active or selected.
isSelected	boolean	false	Marks the item as selected.
isLink	boolean	false	Indicates if the item is rendered as a link.
...rest	HTMLAttributes	-	Any other props are spread onto the dropdown item element.

DropdownList Props#

Prop	Type	Default	Description
children	ReactNode	-	The list of dropdown items to display.
className	string	''	Additional CSS classes for the dropdown list wrapper.
...rest	HTMLAttributes	-	Any other props are spread onto the dropdown list container.