Dropdown

The Dropdown component is a versatile and interactive UI element, designed to provide a menu of options that can be selected by the user. It enhances user experience by offering a streamlined way to present and choose from a list of items within a compact space

import

To utilize the Chip component, import it from @vivakits/react-components.

import { Dropdown, DropdownTrigger, DropdownItem } from "@vivakits/react-components";

Dropdown Trigger

Dropdown trigger is a wrapper around the element which triggers the dropdown as the name suggests. Inside this, main dropdown contents resides. You can handle the way of trigger dropdown using action prop.

Dropdown Menu

Dropdown menu is the main container of the dropdown. DropdownMenu contains all the dropdown items. It is a wrapper around the dropdown items. It has several props which gives control over the menu that drops when clicking on dropdown button or icon.

align

The align prop aligns the dropdown menu to the left, right or middle of the dropdown button. It accepts string values start or end or center. By default the value is center.

onSelect

The prop onSelect of DropdownMenu defines the functionality on selecting the dropdown menu.

Dropdown Item

Dropdown items are the actions that will be available on the dropdown. Clicking on those spesific actions will take place. DropdownItem comes with several props.

disabled

The prop disabled specifies whether the dropdown item is disabled or not. If set to true, the item cannot be interacted with. Default value for this is false.

onClick

The prop onClick defines the functionality on clicking a specific dropdown item.

onSelect

The prop onSelect of DropdownItem defines the functionality on selecting a specific dropdown item.

value

The value prop is associated with the dropdown item. This value can be used to identify the selected item when handling selection events

Example

We can use Dropdown with break in items or with icons. Examples are provided below

Dropdown API reference

Attribute	Type	Description	Default
children	node	Content to be displayed inside the component	-
open	boolean	Indicates if the component is open or closed	-

DropdownMenu API reference

Attribute	Type	Description	Default
children	node	Content to be displayed inside the dropdown menu	-
className	string	CSS class names for custom styling	-
onSelect	function	Handler for item selection events	-
align	startcenterend	Defines alignment of the dropdown menu	center
...props	object	Additional props to be spread onto the component	-

DropdownItem API Reference

Attribute	Type	Description	Default
children	ReactNode	Content to be displayed inside the component	-
className	string	CSS class names for custom styling	-
disabled	boolean	Indicates if the component is inactive	center
onClick	function	Handler for click events	-
onSelect	function	Handler for selection events	-
value	any	Current value of the component	-
...props	object	Additional props to be spread onto the component	-

Drawer Empty