Drop Down

yarn add @clayui/drop-down

A dropdown menu displays a list of options for the element that triggers it.

DropDown
DropDown.Action
DropDown.Caption
DropDown.Divider
DropDown.Group
DropDown.Help
DropDown.Item
DropDown.ItemList
DropDown.Menu
DropDown.Search
DropDownWithItems
DropDownWithDrilldown

Property	Type	Required	Default	Description
active	boolean	false	false	Flag to indicate if the DropDown menu is active or not.
alignmentPosition	React.ComponentProps<typeof Menu>['alignmentPosition']	false		Default position of menu element. Values come from `./Menu`.
containerElement	React.JSXElementConstructor<any> \| 'div' \| 'li'	false	'div'	HTML element tag that the container should render.
hasRightSymbols	boolean	false		Flag to indicate if menu contains icon symbols on the right side.
hasLeftSymbols	boolean	false		Flag to indicate if menu contains icon symbols on the left side.
menuElementAttrs	React.HTMLAttributes<HTMLDivElement>	false		Prop to pass DOM element attributes to <DropDown.Menu />.
onActiveChange	(val: boolean) => void	true		Callback for when the active state changes.
offsetFn	React.ComponentProps<typeof Menu>['offsetFn']	false		Function for setting the offset of the menu from the trigger.
trigger	React.ReactElement & { ref?: (node: HTMLButtonElement \| null) => void; }	true		Element that is used as the trigger which will activate the dropdown on click.

Extends from React.HTMLAttributes<HTMLButtonElement>Extends from React.HTMLAttributes<HTMLDivElement>Extends from React.HTMLAttributes<HTMLLIElement>

Property	Type	Required	Default	Description
header	string	false		Value provided is a display component that is a header for the items in the group.

Extends from React.HTMLAttributes<HTMLDivElement>

Property	Type	Required	Description
active	boolean	false	Flag that indicates if item is selected.
disabled	boolean	false	Flag that indicates if item is disabled or not.
href	string	false	Path for item to link to.
innerRef	React.Ref<any>	false
spritemap	string	false	Path to icon spritemap from clay-css.
symbolLeft	string	false	Flag that indicates if there is an icon symbol on the left side.
symbolRight	string	false	Flag that indicates if there is an icon symbol on the right side.

Extends from React.HTMLAttributes<HTMLUListElement>

Property	Type	Required	Default	Description
active	boolean	false		Flag to indicate if menu is showing or not.
alignElementRef	React.RefObject<HTMLElement>	true		HTML element that the menu should be aligned to
autoBestAlign	boolean	false	true	Flag to suggest or not the best region to align menu element.
alignmentPosition	number \| TPointOptions	false	5	Default position of menu element. Values come from above. Align.TopCenter = 0; Align.TopRight = 1; Align.RightCenter = 2; Align.BottomRight = 3; Align.BottomCenter = 4; Align.BottomLeft = 5; Align.LeftCenter = 6; Align.TopLeft = 7; Defaults to BottomLeft You can also pass an array of strings, corresponding to the points of the targetNode and sourceNode, `[sourceNode, targetNode]`. Points can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right). For example: `['tl', 'bl']` corresponds to the bottom left alignment.
hasLeftSymbols	boolean	false		Flag to indicate if menu is displaying a clay-icon on the left.
hasRightSymbols	boolean	false		Flag to indicate if menu is displaying a clay-icon on the right.
focusRefOnEsc	React.RefObject<HTMLElement>	false		Element ref to call focus() on after menu is closed via Escape key
offsetFn	(points: TPointOptions) => [number, number]	false	(points) => OFFSET_MAP[points.join('') as keyof typeof OFFSET_MAP] as [ number, number ]	Function for setting the offset of the menu from the trigger.
onSetActive	(val: boolean) => void	true		Callback function for when active state changes.

Property	Type	Required	Default	Description
formProps	React.HTMLAttributes<HTMLFormElement>	false	{}	Props to add to form element
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	true		Callback for when input value changes.
spritemap	string	false		Path to the location of the spritemap resource.
value	React.ReactText	true		Value of the searchInput

DropDownWithItems

Property	Type	Required	Default	Description
spritemap	string	false		The path to the SVG spritemap file containing the icons.
items	Array<IItem>	true		List of items to display in drop down menu
alignmentPosition	React.ComponentProps< typeof ClayMenu >['alignmentPosition']	false		Default position of menu element. Values come from `./Menu`.
caption	string	false		Informational text that appears at the end or above the `footerContent` prop.
className	string	false
containerElement	React.ComponentProps< typeof ClayDropDown >['containerElement']	false		HTML element tag that the container should render.
footerContent	React.ReactElement	false		Add an action button or any other element you want to be fixed position to the footer from the DropDown.
trigger	React.ReactElement	true		Element that is used as the trigger which will activate the dropdown on click.
helpText	string	false		Add informational text at the top of DropDown.
menuElementAttrs	React.ComponentProps< typeof ClayDropDown >['menuElementAttrs']	false		Prop to pass DOM element attributes to <DropDown.Menu />.
offsetFn	React.ComponentProps<typeof ClayDropDown>['offsetFn']	false		Function for setting the offset of the menu from the trigger.
onSearchValueChange	(newValue: string) => void	false	() => {}	Callback will always be called when the user is interacting with search.
searchable	boolean	false		Flag to show search at the top of the DropDown.
searchProps	Omit< React.ComponentProps<typeof Search>, 'onChange' \| 'spritemap' \| 'value' >	false		Pass the props to the Search component.
searchValue	string	false	''	The value that will be passed to the search input element.

DropDownWithDrilldown

Property	Type	Required	Description
alignmentPosition	React.ComponentProps< typeof ClayMenu >['alignmentPosition']	false	Default position of menu element. Values come from `./Menu`.
containerElement	React.ComponentProps< typeof ClayDropDown >['containerElement']	false	HTML element tag that the container should render.
initialActiveMenu	string	true	The unique identifier of the menu that should be active on mount.
menuElementAttrs	React.ComponentProps< typeof ClayDropDown >['menuElementAttrs']	false	Prop to pass DOM element attributes to <DropDown.Menu />.
menus	{ [id: string]: React.ComponentProps<typeof Drilldown.Menu>['items']; }	true	Map of menus and items to be used in the drilldown. Each key should be a unique identifier for the menu.
offsetFn	React.ComponentProps<typeof ClayDropDown>['offsetFn']	false	Function for setting the offset of the menu from the trigger.
spritemap	string	false	Path to spritemap
trigger	React.ReactElement	true	Element that is used as the trigger which will activate the dropdown on click.

DropDown

DropDown.Action

DropDown.Caption

DropDown.Divider

DropDown.Group

DropDown.Help

DropDown.Item

DropDown.ItemList

DropDown.Menu

DropDown.Search

DropDownWithItems

DropDownWithDrilldown