Developer TIP
DropdownMenu is a wrap over Dropdown with the addition of features for switching options from the keyboard.
DropdownMenu
DropdownMenu is a wrap over <Dropdown/>, which is a wrap over <Popper/>.
import DropdownMenu from '@semcore/ui/dropdown';
<DropdownMenu />;import DropdownMenu from '@semcore/ui/dropdown';
<DropdownMenu />;DropdownMenuProps
& {...}| Name | Type | Description |
|---|---|---|
| size | Size of the menu | |
| defaultHighlightedIndex | number | Index of the element selected by default |
| highlightedIndex | number | Index of the selected item |
| onHighlightedIndexChange | (highlightedIndex: number) => void | Callback for highlightedIndex change highlightedIndex - Index of the selected item |
| locale | string |
DropdownMenu.Trigger
DropdownMenu.Trigger is a wrap over <Dropdown.Trigger/> component, which is a wrap over <Popper.Trigger/>.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Trigger />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Trigger />;DropdownMenu.Popper
DropdownMenu.Popper is a wrap over <Dropdown.Popper/> component, which is a wrap over <Popper.Popper/>.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Popper />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Popper />;DropdownMenu.List
DropdownMenu.List is a container component for the list items with the <ScrollArea/> inside it.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.List />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.List />;DropdownMenuListProps
& & {...}| Name | Type | Description |
|---|---|---|
| size | Size of the menu |
DropdownMenu.Menu
DropdownMenu.Menu is a wrap over the <Dropdown.Popper/> + <DropdownMenu.List/> component. In fact, it is syntactic sugar when no direct access to the Popper node is needed.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Menu />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Menu />;DropdownMenuMenuProps
& {...}DropdownMenu.Item
Interactive menu items that are available for selection and switching from the keyboard.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item />;DropdownMenuItemProps
& {...}| Name | Type | Description |
|---|---|---|
| selected | boolean | Enables selected state |
| disabled | boolean | Disables item |
| highlighted | boolean | Adds focus styles around |
| notInteractive | boolean | Disables hover state |
| size | Size of the component |
DropdownMenu.ItemTitle
This non-interactive menu item is used to display the titles in the list. It is a wrap over the Flex component.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.ItemTitle />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.ItemTitle />;DropdownMenuItemTitleProps
& {...}| Name | Type | Description |
|---|---|---|
| size | Size of the component |
DropdownMenu.ItemHint
This non-interactive menu item is used to display tips in the list. It is a wrap over the Flex component.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.ItemHint />;import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.ItemHint />;DropdownMenuItemHintProps
& {...}| Name | Type | Description |
|---|---|---|
| size | Size of the component |
Context
Context of the component is available inside the render-function.
DropdownMenuContext
& {...}| Name | Type | Description |
|---|---|---|
| highlightedIndex | number | |
| getListProps | ||
| getItemProps | ||
| getItemHintProps | ||
| getItemTitleProps |