DropdownMenu
DropdownMenuis a wrap overDropdownwith 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 />;
DropdownMenuPropsDropdownProps & {...}| Property | Description |
|---|---|
size DropdownMenuSize = m | 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 />;
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 />;
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 />;
DropdownMenuListPropsBoxProps & ScrollAreaProps & {...}| Property | Description |
|---|---|
size DropdownMenuSize = m | 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 />;
DropdownMenuMenuPropsDropdownMenuListProps & {...}DropdownMenu.Item
Interactive menu items that are available for selection and switching from the keyboard.
import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item />;
DropdownMenuItemPropsFlexProps & {...}| Property | Description |
|---|---|
selected boolean | Enables selected state |
disabled boolean | Disables the component |
highlighted boolean | Adds focus styles around |
notInteractive boolean | Makes the element non-interactive |
size DropdownMenuSize = m | 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 />;
DropdownMenuItemTitlePropsFlexProps & {...}| Property | Description |
|---|---|
size DropdownMenuSize = m | 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 />;
DropdownMenuItemHintPropsFlexProps & {...}| Property | Description |
|---|---|
size DropdownMenuSize = m | Size of the component |
Context
Context of the component is available inside the render-function.
DropdownMenuContextDropdownContext & {...}| Property | Description |
|---|---|
highlightedIndex number | |
getListProps* | |
getItemProps* | |
getItemHintProps* | |
getItemTitleProps* |